详解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"></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"></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"></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则第一次进入页面就调用回调函数且绑定值。