Vue计算属性computed和监听watch

1.计算属性

初衷：为了解决模块里面有太多的计算逻辑让模版难以维护。

计算属性可以依赖一个数据也可以依赖多个数据的变化

使用场景：

商品单价和数量改变时，商品总价更改。如果写在方法里面，那么每次修改商品单价和数量时都会去调用这个方法，这种每次去调用都会消耗一部分性能，对页面渲染并不友好。所以就可以使用计算属性，计算属性可以使用缓存

2.计算属性的setter

计算属性不能在外部直接进行赋值，如果想要给计算属性赋值，就需要使用set/get方法，而且计算属性里面使用对象写法。

如购物车里面商品，全选按钮会根据商品是否全选中来决定是否被选中

  <el-checkbox size="mini" v-model="checkedAll"></el-checkbox>checkedAll: {get() {return this.cartProducts.every(item => item.isChecked);},set(newVal) {this.cartProducts.map(item => (item.isChecked = newVal));}}

3.计算属性的特性

1. 计算属性会被加入到vue实例

2. 计算属性所依赖的数据未发生变化，结果会被缓存（缓存依赖于数据的变化，数据没有变化不会缓存），下一次页面更新时首先会查看数据是否变化，如果没有变化不会触发computed函数会直接读取缓存的内容

4.watch监听器

监听器适用于数据发生改变时做一些副作用相关的处理

5.watch相关api

• 可以监听data数据中的变量；
• 监听属性的方法，可以是methods里的方法名；
• 可以使用deep:true对对象进行深度监听
• 可以使用immediate: true在页面首次加载时就触发
• 可以传入回调数组，它们会被按顺序逐一调用
• 可以只监听对象的某个属性 obj.a

var vm = new Vue({data: {a: 1,b: 2,c: 3,d: 4,e: {f: {g: 5}}},watch: {a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深（对对象的深度监听）c: {handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用（页面加载时就触发）d: {handler: 'someMethod',immediate: true},// 你可以传入回调数组，它们会被按顺序逐一调用e: ['handle1',function handle2 (val, oldVal) { /* ... */ },{handler: function handle3 (val, oldVal) { /* ... */ },/* ... */}],// watch vm.e.f's value: {g: 5}（只监听对象的某个属性）'e.f': function (val, oldVal) { /* ... */ }},methods:{someMethod(){console.log("methods方法中监听");}}
})
vm.a = 2 // => new: 2, old: 1

6.watch可以处理异步

watch内部可以处理异步相关逻辑

7.计算属性computed和监听watch的区别

• 计算属性会进行缓存，缓存是由数据变化决定。在页面下一次更新时，首先会查看里面的字段是否有变化，如果字段没有变化，则不会触发会computed函数从上一次缓存中读取数据；而watch不会进行缓存；
• 计算属性computed因为有return所以不能处理异步相关逻辑；而watch可以处理异步相关逻辑
• computed首次加载就会触发缓存里面的内容，但是watch如果要首次加载就触发需要使用immediate:true属性；
• computed会对对象进行深度监听，但是如果watch想进行深度监听需要使用deep:true属性