computed 与 watch

一、计算属性computed

1、支持缓存，只有依赖缓存数据发生改变时才会重新进行计算。

2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化。

3、属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或父组件传递的props中的数据通过计算得到的值。

4、如果一个属性是由其他属性计算得来的，那么这个属性依赖于其他属性，是一个多vs1 或者 1vs1 ，一般用computed。

5、如果computed属性值是函数，默认会走get方法。函数的返回值就是属性的属性值。computed属性中的属性都有一个get方法和set方法，当数据变化时，调用set方法。

var vm=new Vue({
    el:"#app",
    data:{
       message:" hello"
    },
    template:`<div><span>原始值：{{message}}</span><span>改变后值：{{varyMessage}}</span></div>`,  
　computed:{ 
        varyMessage:function(){ 
              return this.message.split("").reverse().join('') 
         } 
    } 
})     

当在页面中使用大量复杂的逻辑表达式处理数据时，用computed易于维护。

而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算

所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性

 二、监听属性watch

1、不支持缓存，数据改变，直接触发相应操作，是实时监听数据的变化并改变自身的值。

2、支持异步，监听的函数接收俩个参数，第一个参数是最新的值，第二个参数是之前的值。

3、当一个属性发生变化时，执行对应的操作。是1vs多。

4、监听数据必须是data中声明过的值或者父组件传递的props值，当数据变化时，触发其他操作，函数有俩个操作。

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 (val, oldVal) { 
       console.log("obj 变了")
      },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深   },
      "obj.a":{
           handler: function (val, oldVal) { 
               console.log("obj.a 变了")
          },
           immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用   
       }
   }
}).$mount("#app");        

不应该使用箭头函数来定义 watch 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例

1）deep 控制是否要看这个对象里面的属性变化

2）immediate 控制是否在第一次渲染时执行这个函数

vm.$watch() 的用法和 watch 回调类似

1）vm.$watch('data属性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
   console.log("n 变了");
},{deep: true, immediate: true})

三、总结

如果一个数据需要经过复杂计算就用computed

如果一个数据需要被监听，并且对数据做一些操作就用watch

简单理解：在一个购物车页面中，computed是最后的结算额，所依赖的商品数量发生改变，最后的结算额发生相应改变，是果，watch是商品数量的实时监听，数量发生改变，导致结算额改变，是因

 

扩展：Vue的computed和watch的细节全面分析

参考：https://www.jb51.net/article/202468.htm

https://www.cnblogs.com/jiajialove/p/11327945.html