watch和computed的区别

自动调用相关的函数去实现数据的变动。

  • watch

类似于监听机制 + 事件机制

  1. watch: {
  2.     fullName: function (val) {
  3.         this.firstName + val
  4.     }
  5. }
  • computed

计算属性，是data对象里的数据属性使用方式是一致的。

  1. computed: {
  2.     fullName: function () {
  3.             return this.firstName + this.lastName
  4.     }
  5. }

watch和computed的使用

  • watch

用于观察和监听页面上的Vue实例。
如果说要在数据变化时，去进行异步操作，或者是进行大开销数据操作，就可以使用watch操作。
image.png

  • computed

当页面中某些数据依赖其他数据进行变动的时候，可以使用计算属性。

存在缓存问题，当computed里面不依赖其他数据的时候，computed里面的数据只会记录第一次记录的值。
image.png