computed

computed是计算属性，如果某个属性需要计算得到结果，就可以放到computed中。

new Vue({
    computed:{
        fn(){}
    },
    template:`
      <div>{{fn}}</div>
      //无需加括号即可引用
      set(){},
      get(){}
    `
})

computed中也可以使用setter与getter

此外，如果某个值已经被计算过，那么会被存到cache中，当使用到同样的值时，不会重新进行计算。

---

watch/this.$watch

watch是监听(异步)，即当依赖的数据变化时，执行回调。

因为是异步，所以如果某个数据需要watch执行之后在执行，就需要通过 this.nextTick() 将其也变成异步来执行。

此外，watch还有两个属性，分别是immediate 和 deep

前者表示是否监听从无到有的第一次变化

后者表示是否深入监听数据的变化

new Vue({
    data(){
        return { obj :  { a : '' } }
    },
    watch:{
        'xxx':{
            handler(){obj.a = 'a'},
            immediate:true
            //此时，obj.a 会被渲染到页面上，否则不会
        }
    }
})

deep语法同上。

不使用deep时

• 如果obj:{a:'a'} 中的 a 发生了变化，

那么对于watch来说，obj没变，obj.a变了，

• 如果给obj重新赋值，但是值还是{a:'a'}，

那么对于watch来说，obj变化了，但是obj.a并没有变化

使用deep时

如果obj.a发生了变化，那么对于watch来说，obj也发生了变化。

---

computed与watch的区别

• computed是计算属性，注重值的计算。

在使用时，不需要加括号，且会调用缓存，如果已经被计算过，那么不会被再次计算。

• watch是监听，注重当依赖的数据变化时，进行回调。

watch有两个属性，分别是immediate和deep，

前者表示一个数据从无到有时是否继续渲染。

后者表示是否深入判断对象中的值，如果为true，那么对象中的一个属性(如obj.a)发生了变化，watch就会判断为整个对象都发送了变化(obj.b 不会被判断为变化)。

注意：computed与watch中不能使用箭头函数