computed和watch

computed是计算属性，watch是侦听器

• computed是计算属性，通过其他变量计算得来的另一个属性，

  • 如fullname在它所依赖的firstname和lastname两个变量变化时重新计算自己的值。
  • 另外，computed具有缓存。计算属性是基于他们的依赖进行缓存的，只有相关依赖发生改变时才会重新求值，意味着如果依赖没变，多次访问计算属性都会立即返回之前的计算结果，而不必每次都执行函数
• watch是侦听器，侦听一个特定的值，当该值变化时执行特定函数。

data() {
    return {
        firstname: '空条',
        lastname: '承太郎',
        fullname2: '空条承太郎'
    }
},
watch: {
    lastname: function(val) {
        this.fullname2 = this.firstname + ' ' + val
    }
}
// this.lasttname = '徐伦'
// console.log(this.fullname2) // 空条徐伦
computed: {
    fullname: function(val) {
        return this.firstname + ' ' + this.lastname
    }
} // 空条承太郎

• 监听复杂数据类型

  • 监听复杂数据类型需用深度监听

    data() {
        return {
          jojo: {
            stand: '立'
          }
        }
    },
    watch: {
     jojo: {
       handler(oldval, newval) {
         console.log(oldval, newval)
       },
       deep: true
     }
    },
    methods: {
    changeWatch() {
        this.jojo.stand = '波波立！'
    }
    } 

    

发现oldval和newval值是一样的,所以深度监听可以监听到对象的变化,但无法监听到具体对象里面那个属性的变化。
一样原因是因为索引同一个对象/数组，vue不会保留原来值的副本。

深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

总结：

1、也就是computed是关联多个变量的，只要其中一个变量值改变，都会触发函数；watch则只依赖一个变量，每次只能对一个变量进行监控。

2、最重要的一点是：watch是监听data里定义的值，而computed的计算属性只能在computed内，不能在data中定义，否则会报错(重复定义)，因为computed作为计算属性定义变量并返回对应的结果给这个变量，变量不可被重复定义和赋值。

3、①：computed中使用箭头函数的话，会导致this指向的不是vueComponent(因为箭头函数没有自己的this，而是和上一层作用域共享this，computed的上一层作用域可能就没有了，所以this是undefined)

②：使用function() 形式就可以解决，this指向vueComponent
③：使用对象的形式，get()、set()也都指向vueComponent （例：fullname: { get() {return this.firstname + ' ' + this.lastname}}）

4、还有就是，进行异步操作，开销较大时，建议使用watch或method，而不是使用computed。

也可参考 传送门

以上