Vue.js中computed和watch的区别_综合

计算属性computed

computed的概念

Vue的计算属性computed用于返回一个计算值，如果用于计算这个计算值的data的属性（即依赖的响应式 property ）发生变化，计算值也会相应的发生变化。

var vm = new Vue({data: { a: 1 },computed: {// 仅读取aDouble: function () {return this.a * 2},// 读取和设置aPlus: {get: function () {return this.a + 1},set: function (v) {this.a = v - 1}}}
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

computed的缓冲特性

computed有时可以被methods代替，可以简单的理解为不需要写()的method方法。

但区别于methods每次调用都会执行计算，computed的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

监听选项watch

watch的概念

Vue的选项watch用于监听某个变量的变化，如果变量变化则异步地执行watch中对应的函数。

var vm = new Vue({data:{a : 1},watch:{//监听变量a的变化，如果变化就执行functiona:function(newValue,oldValue){console.log('new: %s, old: %s', val, oldVal)}}
})vm.a  = 2 //输出：new: 2, old: 1

watch的两个重要选项

选项：deep：
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。(也就是说一般情况下，如果你监听某个对象obj,如果对象的属性发生变化obj.a = 2，watch是不会发现的)
```
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
```
选项：immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
```
  vm.$watch('a', callback, {immediate: true})// 立即以 `a` 的当前值触发回调
```