详解Vue中的computed和watch

前言
原理
- computed
- - computed特点
  - computed有几种创建方式
  - 应用
- Watch
- - Watch有几种创建方式
  - Watch主要内容
  - Watch特性
  - 应用场景
computed和Watch区别

前言

在Vue当中，watch和computed都可以实现监听的效果，本文主要是围绕watch和computed这两个属性来进行深入的讲解，讲解内容包括它们的原理、实现方式、各自优劣以及区别。

原理

computed

概念：通过对某个属性值进行一系列计算，让该属性值为一个新的值。在计算过程中，可以调用多个其他属性值用于计算。
computed又称计算属性，它主要作用就是用于在Vue当中监听某个属性的变化。举个例子来分别演示没有computed和用了computed的vue实例。
需求：让两个数字相加求解。
没有用computed：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!--1.导入Vue的库文件-->
		<script src="vue.js>vue.js"></script>
	</head>
	<body>

		<div id="app">
			a:<input type="number" v-model="a"><br>
			b:<input type="number" v-model="b"><br>
			<button @click="btn">计算</button>
			<div>相加等于：{{ c }}</div>

		</div>

		<!--2.创建Vue的实例对象-->
		<script>
			//创建Vue的实例
			const vm = new Vue({
				// el属性是固定写法。
				// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
				el: "#app",
				data: {
					a: '',
					b: '',
					c: null
				},
				methods: {
					btn() {
						this.c = parseFloat(this.a) + parseFloat(this.b)
					}
				}
			})
		</script>
	</body>
</html>

在上述代码中，我们可以发现，求解是用了一个按钮实现，首先我们创建了Vue实例，然后创建三个变量a，b，c，c是结果，a，b是两个数字，用v-model进行数据绑定后，输入点击按钮后就能出现结果。那么如果使用计算属性computed，也可以用另一种方式实现相同的效果。计算操作在计算属性中进行实现。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!--1.导入Vue的库文件-->
		<script src="vue.js>vue.js"></script>
	</head>
	<body>

		<div id="app">
			a:<input type="number" v-model="a"><br>
			b:<input type="number" v-model="b"><br>
			<div>结果：{{ c }}</div>

		</div>

		<!--2.创建Vue的实例对象-->
		<script>
			//创建Vue的实例
			const vm = new Vue({
				// el属性是固定写法。
				// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
				el: "#app",
				data: {
					a: '',
					b: '',
				},
				computed:{
					c(){
						return parseFloat(this.a)+parseFloat(this.b);
					}
				}
			})
		</script>

	</body>
</html>

在上述代码中，我们可以看到，计算属性代替了按钮实现了相同的计算功能。那么同时我们发现，计算属性要放在computed节点下才生效，而节点下的计算属性，语法格式和定义method方法的语法格式相同，这个计算属性，会实时监听它的属性值是否发生改变，如果发生改变就会立即缓存，不需要任何人为操作。它在初始化时就会进行缓存，那么在上述代码中，它的初始值就为NaN，NaN展开就为Not a Number，中文叫非数。输入a和b的数字后，就可以看到立刻发生变化。

computed特点

计算属性都放在computed节点下。
定义方式和方法相同。
只要该计算属性的依赖属性发生改变，它就会重新计算并进行视图更新以及计算属性缓存。
所有的计算属性都有缓存机制，当初始化后即开始了第一次计算属性缓存，而看到的值，实际是从缓存中拿到的。
惰性执行：如果不调用这个计算属性，但是依赖项改变了，那属性会被标记为dirty,但是它计算，只有调用了且被标记为dirty了，它才会进行计算缓存和更新操作。
不允许执行异步操作

computed有几种创建方式

两种，一种函数式，一种对象式。

function a(){} || a:{get(){},set(){}}

应用

当一个属性频繁的受其他多个属性影响时可以被应用。

Watch

概念：监听器，是Vue实例的一个属性，是用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

大白话就是，监听某个属性值是否变化，如果该属性值发生改变，则做一系列与改变有关的操作。

实例：输入姓，输入名，得到姓名

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!--1.导入Vue的库文件-->
		<script src="vue.js>vue.js"></script>
	</head>
	<body>

		<div id="app">
			姓:<input type="text" v-model="x"><br>
			名:<input type="text" v-model="m"><br>
			<div>结果：{{ xm }}</div>

		</div>

		<!--2.创建Vue的实例对象-->
		<script>
			//创建Vue的实例
			const vm = new Vue({
				// el属性是固定写法。
				// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
				el: "#app",
				data: {
					x: '李',
					m: '华',
					xm:''
				},
				watch:{
					x:{
						handler(oldValue,newValue){
							this.xm=newValue+this.m
						}
					},
					m:{
						handler(oldValue,newValue){
							this.xm=this.x+newValue;
						}
					}
				}
			})
		</script>

	</body>
</html>

首先我们分析这个需求，如果把这个需求放在计算属性中，我们发现只需要一个计算属性result就可以实现，而监听需要做两个，因为我们要监听的是姓和名两个属性值，这和计算属性和判断依赖项是否改变是不同的，这也决定了它们适用的方向不同。

Watch有几种创建方式

五种：函数、对象、数组、函数名

常用的还是第一种：

watch:{
					监听属性名:{
						handler(监听前值,监听后值){
							代码逻辑
						}
					}
				}

Watch主要内容

handler：回调函数，也就是监听到变化后执行的函数。
deep：确认是否深入监听，假设有个深层对象，当它很多层内的数据发生变化，是否依旧能监听到且执行回调函数，如果想监听到，可以开启深度监听。
immediate：默认是false，false则初始化页面后不调用监听回调函数，true则第一次进入页面就调用回调函数且绑定值。