computed——计算属性
computed就是用来计算出一个值的属性，换句话说被计算出来的属性就是计算属性。调用这个值时，不需要加括号，可以直接当属性用。
实例:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
缓存
如果依赖的属性没有变化，那么计算属性就不会重新计算。Vue 对 getter/settr 做了特殊的处理，使这两个函数默认不会做存缓 。
computed特点
-
1.computed 最大的特点是会根据它们的响应式依赖进行自动缓存，如果依赖不变，那么 computed 的值就不会变。
-
2.computed 在使用时默认的 function 是 get函数，set 函数要自己加。
watch——侦听（监听）属性
watch 和 computed 有些相似，它的功能是当数据（属性）变化时，就执行一个函数。watch 在数据变化时执行异步或开销较大的操作时效率更高。
语法一
watch:{
obj1:function(value,oldValue), //function的参数是 Vue 传给我们的，一个最新值，一个旧值
obj2(){}, //ES6缩写
obj3:[f1,f2], //两个函数，依次执行f1和f2
obj4:'methodName', //去methods里面找对应名字的函数
obj5:{handler:fn,deep:true,immediate:true},function有些webpack版本可以省去
obj6:'object.a':function(){}
}
语法二
vm.$watch('obj',fn,{deep:...,immediate:...})
watch 的 this
需要注意的是，watch 里面最好别用箭头函数，除非你放弃使用 this。
const vm = new Vue({
data: ...
watch:{
n:function(){
this ===vm
}
}
})
在这个代码中，箭头函数里 this 不等于 vm。首先，箭头函数本身也没有 this，其次 new Vue不是函数，而是函数的调用，这里的 this 是一个全局变量。
watch特点
immediate
根据 Vue 本身的逻辑，watch是监听属性，监听的是数据的变化，而第一次渲染的时候，是一个从无到有的过程，是一个开始，而不算变化。所以 Vue 默认第一次渲染的时候不执行watch。但 Vue 提供了 immediate 方法用于表示在第一次渲染的时候是否要执行 watch。
immediate：true/false //true执行，false不执行，默认false
Deep
在 Vue 的数据中，复杂类型存地址，简单类型存数值。简单类型的数据如数字，改变了值就是直接改变了。但对于对象而言，地址没变，对象就没变。对象里面的属性变了，对象依旧不变。Vue 提供了 deep 方法用于判断是否要看这个对象里面的属性的变化。
Deep：true/false //true就判断对象内的属性，默认flase
总结
Computed 主要着重于依赖之间的变化以及缓存，watch 主要是数据变化的时候去执行一个东西，而不是得出一个结构，比如记录历史或者打 log。
