一、computed

二、watch

1. 当监听的数据发生变化而做出的动作；
2. 数据怎么才算发生变化呢？

• vue中，对于一个简单数据类型的值变了，那它肯定是发生变化了，毋庸置疑；

• 对于一个对象，你把对象里的简单数据类型的值变了，那么就只有这个简单数据类型发生变化了，这个对象是没有发生变化的（因为对于一个对象，只要它的地址没变，那么它就没有发生变化）

• 对于一个对象，只有你把它的地址改变了，那么对象才会发生变化；

• 请问，如果obj原本就是{a: 'a'}，现在再obj = {a: 'a'}，那么obj变了吗（回答：变了，因为地址变了）；obj.a变了吗（回答：没有变，因为它的值还是'a'）；所以总结下来，简单类型看值，复杂类型（对象）看地址；

• 但是！！！vue的watch提供了一个选项，可以直接监听对象里面的值是否发生变化，那就是deep:true！！！deep:true就是监听obj的时候需不需要再往里深入看它里面值得变化；

• 当你obj.a发生变化，那obj算不算也发生变化呢？如果需要的答案【它变了】，那么就用deep:true；如果需要的答案【它没变】，那么就用deep:false；

• immediate:true：第一次是否要执行；

• watch的属性里面绝对不要用箭头函数（就是它监听的属性的value），会导致this指向错误；例如

//watch的语法
new Vue({
      watch:{
              a: function(newValue,oldValue){},   //但是绝对不要写成  a:  ()=>{}
              a(newValue,oldValue){},  //这样写跟上面那种写法是一样的啊 es6的语法啊
              b: [f1,f2] , //支持里面接受两个函数，不能用箭头函数啊！这两个函数会在b变化的时候依次执行
              c: 'methodName',  // methods里面的方法
              d:{ handler: fn, deep: true, immediate: true},
              'obj.a': function(){}
       }
}).$mount('#app')

//watch还有另外一种写法，但一般不用这种
vm.$watch('a',function(){},{deep: true, immediate: true})

三、computed和watch的区别

1、 computed是计算属性；watch是监听的意思；
2、 解释computed：①computed是用来计算出一个值得，在使用的时候可以像属性一样直接用，不需要加括号；②它根据依赖会自动缓存，依赖的数据没有发生变化的话，那么它就不会再重新计算；
3、 解释watch：①watch是用来监听数据的变化，从而做出相应的动作；②它有两个属性，immediate表示在第一次渲染时是否执行这个函数，watch默认在第一次渲染时是不执行的；deep表示在监听一个对象时，是否要看它里面属性的变化；

如果有一种情况，computed和watch都可以用，那么优先选择使用computed