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属性