[toc] 1.这两个内部都是基于watcher的 2.区别在于computed数据可以用于页面渲染，watch不行 3.computed只有在取值时才会执行对应的回调，watch会默认执行一次，为了拿到老的值 4.computed用了一个dirty属性，实现了缓存机制，多次取值，如果依赖的值不发生变化，不会更改dirty的结果，拿到的就是老的值 ### computed-watcher watch在computed使用的时候会添加一个计算watchr 在渲染过程中会添加渲染watchr 在用户写的监听的过程中会写一个用户watchr 1. 在initState过程中，会判断options中是否传入了computed和watch 2.如果有computed属性，就会触发initComputed方法，生成一个computed watch，这个watch传入了一个lazy属性用于判断类型，并赋值到dirty属性为true 3.initComputed中还会触发createComputedGetter方法 ```js function createComputedGetter (key) { return function computedGetter () { // 计算 watcher var watcher = this._computedWatchers && this._computedWatchers[key]; if (watcher) { if (watcher.dirty) { // 如果dirty属性为true的时候， watcher.evaluate(); } if (Dep.target) { watcher.depend(); } return watcher.value // 如果dirty为false，就会直接获取watcher.value } } } ``` 4.获取computed值得时候，会看dirty属性是否为true，如果为true，就会触发watcher的get方法，获取对应的返回值，并且将dirty改为false， 5.后续如果watcher没有触发update，那么dirty就不会改为true，如果为false，直接返回watcher.value，不会触发get方法当这样就实现了数据缓存 ``` Watcher.prototype.evaluate = function evaluate () { this.value = this.get(); this.dirty = false; }; ``` + immediate: watch设置了这个属性后，会将实例化得到的值传入回调，并且立即执行一次回调函数 + deep：深度监听，会递归监听watch的对象