vue 中 computed 和 watch 的区别

代码真的养发2024-01-08 20:54

在Vue中，computed和watch都是用于监听数据的变化，并且根据变化做出相应的反应。

computed是一个计算属性，它会根据依赖的数据的变化自动计算得出一个新的值，并且具有缓存的特性。当依赖的数据发生变化时，computed属性会重新计算，并且只有在依赖的数据发生变化时才会重新计算，否则会直接返回之前计算的结果。computed属性适用于依赖较少、计算量较大的情况。

以下是一个使用computed的例子：

javascript 复制代码

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在上面的例子中，fullName是一个computed属性，它依赖于firstName和lastName这两个data属性。当firstName或者lastName发生变化时，fullName会自动重新计算得出新的结果。

watch则是一个侦听器，它会监听指定的数据的变化，并且在数据发生变化时执行相应的回调函数。watch适用于需要在数据变化时执行异步或者复杂的操作的情况。

以下是一个使用watch的例子：

javascript 复制代码

new Vue({
  data: {
    name: 'John Doe'
  },
  watch: {
    name: function (newVal, oldVal) {
      console.log('name changed from ' + oldVal + ' to ' + newVal);
    }
  }
})

在上面的例子中，watch会监听name属性的变化。当name发生变化时，watch会执行相应的回调函数，打印出变化前后的值。

总结一下，computed是根据依赖的数据自动计算得出一个新的值，并且具有缓存的特性；而watch则是监听指定的数据的变化，并在数据发生变化时执行相应的操作。