1、computed
- 1、
computed是计算属性,也就是计算值,它更多用于计算值的场景。 - 2、
computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。每当触发重新渲染时，调用方法将总会再次执行函数。如果计算属性依赖的值没有变化，计算属性会立即返回之前的计算结果，而不必再次执行函数。 - 3、
computed适用于计算比较消耗性能的计算场景。
Computed 初始化时的流程图如下：
computed的初始化流程图.jpg
computed 的源码解析如下：
- 1、在
computed初始化的过程中会创建一个watcher并设置lazy=true,所以在初始化时会求值，在页面中调用computed时，开始求值，调用watcher.evaluate()方法,并将dirty=false。 - 2、当
computed依赖的属性发生改变时，会调用watcher.update()方法，将dirty=true。 - 3、当在页面中再次获取该属性时，会再次调用 如果
dirty为truewatcher.evaluate()方法，否则返回原来计算的值。这就是computed为什么具有缓存效果的原因。
2、watch
- 1、更多的是观察的作用,类似于某些数据的监听回调,用于观察
props $emit或者本组件的值,当数据变化时来执行回调进行后续操作。 - 2、无缓存性，页面重新渲染时值不变化也会执行
- 3、当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
- 4、当我们需要深度监听对象中的属性时，可以打开
deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。 - 5、语境上的差异
watch适合一个值影响多个值的情形。computed适合多个值影响一个值的情形。
watch 初始化时的流程图如下：
watch的初始化流程.jpg
watch 的源码解析如下：
- 在
watch初始化测过程中，会创建一个watcher,并添加user属性，证明这是一个用户添加的watcher。 - 当用户为
watch添加immediate属性且值为true时，会立刻执行watch里面定义的handler，在这里要注意，如果监听的对象或属性是来自props，那么它的值是props的默认值。 - 当用户为
watch添加deep属性时，会调用traverse(value)方法，这个方法本质上是递归监听的对象，在递归的过程中会取值触发getter钩子，给对象中的属性添加依赖。属性依赖的watcher，跟对象的watcher是同一个，因此在对象的属性发生变化时，也会触发更新，调用Watch类的run方法,在run中执行this.cb.call(this.vm, value, oldValue)，来调用watch中的handler。
小结:
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。
这是 vue 专题系列文章中的一篇。更多文章可以访问我的个人博客。github源码地址。如果觉得总结的还可以，大家也可以fork我的框架。希望大家 star 支持一下。
