computed -—计算属性
1、用途
被计算出来的属性就是计算属性
例一：用户名展示
例二：列表展示
2、缓存
如果依赖的属性没有变化，就不会重新计算
getter / setter 默认不会做缓存，但是Vue做了特殊的处理，可以缓存
watch — 侦听、监听
1、用途
当数据变化时，执行一个函数。（当你需要做的东西是为了执行一个函数的时候才使用 watch，只是为了得到一个结果的话，还是使用 computed 更好）
例一：撤销
例二：模拟computed（但是这样做你为什么不直接使用 computed 呢）
2、watch 的 deep 属性
作用：如果你的需求需要在 watch 中 任何一个 复杂类型（对象） 下的属性变了，都相当于这个对象变了。这个时候才会使用 deep 属性
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div>
<button @click="n += 1">n+1</button>
<button @click="obj.a += 'hi'">obj.a + 'hi'</button>
<button @click="obj = {a:'a'}">obj = 新对象</button>
</div>
`,
watch: {
n() {
console.log("n 变了");
},
obj() {
handler(){
console.log("obj 变了");
},
deep: true //告诉你obj也跟着变了。 deep 就是：监听obj的时候是否深入进去看。（不深入就只会看地址）
},
"obj.a": function() {
console.log("obj.a 变了");
}
}
}).$mount("#app");
3、 watch 的 immediate 属性
immediate 表示是否在第一次渲染的时候执行这个函数（由于 watch 的特性如果不设置 immediate 是不会在第一次渲染中就触发 watch 的）
"user.email": {
handler: "changed",
immediate: true // 第一次渲染 触发 watch
},
4、语法（推荐看文档）
（1）语法1：
①：
watch:{
( )=>{ }, //不推荐使用因为这是箭头函数，此刻这里的 this 是全局对象， this 没懂去看博客
}
②：
watch:{
function(value, oldValue){ },
}
③：
watch:{
( ){ },
}
④：
watch:{
[f1, f2],
}
⑤：
watch:{
'methodName',
}
⑥：
watch:{
{handler:fn, deep:true, immediate:true},
'object.a': function(){}
}
（2）语法2：
vm.$watch('xxx', fn, {deep: .. , immediate: ..})//其中 'xxx' 可以改为一个返回字符串的函数
computed 和 watch 的区别（总结）
答：
computed 是计算属性的意思， watch 就是监听的意思。computed 是用来计算出一个值的，这个值我们在调用的时候不需要加括号，可以当属性项用，它可以根据依赖自动缓存，如果依赖不变的话 computed 的值就不需要重新计算。
watch 是用来监听的，有两个选项。一个是immediate 表示第一次渲染的时候是否要执行这个函数；另一个是 deep 意思就是如果我们监听一个对象，我们是否要看这个对象内部的变化。它的定义就是如果某个数据变化了，就要去执行一个函数。
