watch(监听)和computed(计算属性)的区别和用法

 1. computed 的特点和用法

 　　特点：

　　　　（1）支持缓存：默认走缓存，多次调用，只会执行一次计算。只有依赖的数据发生改变，才会重新计算；

　　　　（2）不支持异步，如果有异步操作，无法监听

　　　　（3）属性值为函数，默认使用get方法，当数据改变时，会调用set方法

　　　　（4）主要解决模版中放入过多的逻辑导致不好维护的问题

  computed: {
    crontabValueString: function() {
      console.log(555) // 多次调用，只会执行一次
      let str = this.queryParams.memberName
      return str;
    },
  },

 

2. watch 的特点和用法

 　　特点：

　　　　（1）不支持缓存：只要数据发生变化，就会触发相应的操作；

　　　　（2）支持异步监听

　　　　（3）接收两个参数，第一个是最新值，第二个是之前的值

　　　　（4）监听 data 或者 props 的数据，发生变化时会触发操作，还有两个其他参数：

　　　　　　deep：默认false，深度监听，发现数据内部变化，在复杂的数据内部使用，默认false无法监听到数组和对象内部的变化，为true时，能监听数据变化，但是参数新值和旧值都是新值

　　　　　　immediate：默认false，初始化时执行回调函数

  watch: {
    'queryParams.memberName': { // 监听的数据字段
      handler: (n,o) => { // 数据改变调用的事件
        console.log('-----')
        console.log('n:',n)
        console.log('o:',o)
      },
      deep: false, // 深度监听
      immediate: false // 初始化立即执行
    }
  }

 

3. 区别总结

　　computed计算属性，他依赖其他属性值，有缓存，只有依赖的值发生变化才会去重新计算，但是不能异步

　　watch监听，监听数据的变化，无缓存，数据变化就会执行回调，可以异步，默认false无法监听到数组和对象内部的变化，为true时，能监听数据变化，但是参数新值和旧值都是新值