computed和watch的区别

计算属性computed

  • 支持缓存，当依赖数据变化时，才会进行重新计算
  • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
  • 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听器watch

  • 不支持缓存，数据变化，直接会触发相应的操作

  • watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值。

  • 当一个属性发生变化时，需要执行对应的操作；一对多

  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：

    ​ immediate：组件加载立即触发回调函数执行，

    ​ deep：深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注 意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

immediate例子

  watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即执行handler方法
    immediate: true
  }
}

deep例子

监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler

  watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

进行优化，给对象的指定属性添加侦听，减少性能开销,这样vue.js会一层一层解析直到遇到属性a,才给a设置监听函数

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

computed是用于定义基于数据之上的数据。

而watch是你想在某个数据变化时做一些事情，如果做的事情是更新其他数据，那其实与把这个要更新的数据项定义成computed是一样的，这个时候用computed更有可读性，虽然技术上讲watch也可以实现。

但你也可以在被watch的数据变化时做其他事情啊，比如调用一个方法，这个是computed做不到也不应该做的。

总结：

  • 1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的
  • 2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化