《computed 和 watch》

1. computed

computed是计算属性，它会根据你所依赖的数据动态显示新的计算结果。 计算结果会被缓存，computed的值在getter执行后是会缓存的， 只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。

示例：

new Vue({
    data: {
        user: {
            name: "路飛",
            phone: "12300000000"
        }
    },
    
    computed: {
        displayName(){
            const user = this.user;
            return user.name || user.phone;  //有名字优先返回名字
            }
    },

    template: `
        <div>
            {{displayName}}  //displayName方法 可以当属性用 读取默认的返回值
        </div>
`,
}).$mount("#app");

computed适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed。

2. watch

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。watch有两个参数，一个新值一个旧值。

• 示例

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: function (newVal, oldVal) { 
      console.log("obj 变了")
    },
      deep: true 
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true 
    }
  }
}).$mount("#app");

• handler方法和immediate属性

    handler：给obj绑定一个handler方法，watch方法默认写的就是handler方法
  
    immediate:true：如果watch里声明了obj后，立即执行handler方法 
    immediate:false：不在绑定的时候就执行handler方法
  

• deep属性

    默认值是false，deep代表是否深度监听
    false状态下watch无法监听到对象内部属性的改变
    
  

3. 总结

• 一个数据依赖于其他数据，就把这个数据设计为computed。  
• 需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。