Vue中computed和watch介绍

  在用vue做项目时，有些页面上的数据会依赖其他数据进行一些逻辑运算才能得到，computed的初衷也是为了使模板中的逻辑运算更简单, 比如在Vue模板中有很多复杂的数据计算的话, 我们可以把该计算逻辑放入到computed中去计算。而watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。接下来就对computed和watch进行一些简单的总结:

  computed:

       1.支持缓存，只有依赖的属性值发生变化才会进行重新计算。就是说在计算过后会把得到的值缓存下来(默认是走缓存)，若依赖属性没有发生变化则用缓存中的值；computed依赖的属性是指vue写在data中的属性或者是父组件传过来props中的值，其发生改变才会使computed中的相关逻辑重新计算。

      data: {
        word: 'hi'
      },
      computed: {
        changeWord() {
          // 这里面的this 指向 vm 实例
          return this.msg+'计算'
        }
      }

这里word就是computed中changeWord的依赖属性

      2.不支持异步操作。在computed中是不支持异步操作的，无法监听到数据的变化。

      3.应用场景:一些需要经过复杂逻辑运算的值用computed会比较简单，它会把计算的结果缓存下来，避免多次运算；另外一些数据会依赖其他数据也推荐使用computed

 

watch:

      1.不支持缓存，数据变化则会立即触发，并且支持异步操作；

      2.监听的值是data中声明的值或者是父组件传过来props中的值；

      3.监听函数会有两个参数，第一个是变化后的值，第二个是以前的值；

      data: {
        word: '',
        num: 31
      },    
      watch: {
        num(newVal, oldVal) {
          this.num = newVal + 20;
        }
      }

        这里监听的是data中的num变化，newVal就是变化后的值

      4.immediate和deep属性。组件加载时，watch是监听不到的，把immediate设置为true(默认为false)就在组件加载时也能监听到数据；deep则是深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

     data: {
        obj: {
          word: 'haha',
          name: '小王'，
          say:''
        }
      },

      watch: {
        'obj': {
          handler(newVal, oldVal) {
            // 这里监听的是obj中的name，需在后面设置deep
            this.say = newVal.name+'说:'+this.obj.word;
          },
          immediate: true,
          deep: true // 需要添加deep为true即可对obj进行深度监听
        }
      }