Vue中computed与watch

watch 和 computed 都是以 Vue的依赖追踪机制 为基础的，都在处理这么一件事情：当某一个或者多个数据发生变化时，所有依赖这些数据的“相关”数据可以自动发生变化，也就是自动调用相关函数去实现数据的变动。

1、computed

• 支持缓存，只有依赖数据发生改变，才会重新计算

• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

• computed是计算属性，也就是依赖某个值或props通过计算得来的数据

• computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化时，会重新调用getter来计算

即使data中没有直接声明要计算的变量，也可以在computed中写入。 比如 data只有lastName和firstName。 但是可以在computed直接写 fullName

2、watch

• 不支持缓存，数据变直接触发相应操作

• 支持异步操作

• watch是监听器，可以监听某一个数据，然后执行相应操作。 里面有一个属性是deep，含义为：是否深度监听某个对象的值，默认为false

• 监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值

如果data中没有相应的属性的话，是不能watch的

3、两者的区别

1. computed是计算属性，watch是监听data中的数据变化

2. computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算。反之，则使用缓存中的属性值； watch不支持缓存，当对应属性发生变化时，响应执行

3. computed不支持异步，有异步操作时无法监听数据变化， watch支持异步操作

4. computed第一次加载时就监听， watch默认第一次加载时不监听

immediate：组件创建时执行与否
immediate：true 第一次加载时监听（默认为false）

deep：深度监听，不推荐使用（非常消耗性能）
监听的属性是对象的话，不开启deep时，对象子属性变化不会触发watch
开启deep后对象内部所有子属性变化都会触发watch

5. computed中的函数必须调用return， watch不是

4、使用场景

computed： 一个属性受到多个属性的影响，如 购物车商品结算

watch： 一个数据影响多条数据，如：搜索数据

数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择