Options的进阶属性

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 意思就是如果我们监听一个对象，我们是否要看这个对象内部的变化。它的定义就是如果某个数据变化了，就要去执行一个函数。