虽然已经用vue用了很久，其中computed和watch也数不胜数，但真正让我说清楚这两个到底是什么，还是有点模糊。
1、计算属性
在vue.js文档中是这么说的，当在模板中想要显示某变量的翻转字符串（或者其它操作），在需要对data下数据进行任何复杂逻辑操作的时候，你都应当使用计算属性。
这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作属性vm.reversedMessage的getter函数，当修改vm.message的值时，vm.rversedMessage的值也会重新改变。
计算属性 vs 方法
在这里我们如果用一个方法在methods中注册也能达到同样的效果。
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应时依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
如果computed里面没有响应式依赖的数据，就不会更新。而每次触发重新渲染时，调用方法会再次执行函数。
计算属性 vs 侦听属性
侦听属性是一种更通用的方式来观察和响应vue实例上的数据变动。通过watch一个属性，每次属性发生变化的时候都会触发这个侦听器。
早watch中可以执行任何逻辑，如函数节流，ajax异步获取数据，甚至操作DOM（不建议）。使用watch监听除了handler回调，还有另外两个参数:
deep: 设置为true用于监听对象内部值的变化
immediate: 设置为true将立即以表达式的当前值触发回调（也就是会自动触发一次）。
区别:
watch: 监听的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed：监测的是依赖值，依赖值不变的情况下会直接读取缓存进行复用，变化的情况下才会重新计算。
还有个很重要的区别是: 计算属性不能执行异步任务， 计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测copmuted属性。
最后总结: 计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
computed能做的，watch都能做，反之则不行。能用computed的尽量用computed。
网友评论