Vue 中 computed 和 watch 的异同

2023-10-31 10:54:38

在 Vue 中，computed 和 watch 都是用于响应式数据管理的工具，它们都可以在状态改变时自动更新。然而，这两者之间也存在着一些关键差异。

computed

computed 属性是一个计算属性，它依赖于其他属性的值进行计算，当这些属性的值发生改变时，computed 属性也会自动重新计算。例如：

const vm = new Vue({
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在这个例子中，computed 属性 fullName 依赖于 data 属性 firstName 和 lastName，当 firstName 或 lastName 的值发生改变时，fullName 的值也会自动更新。

watch

watch 则是一种监听器，它可以监听一个或多个属性的值，当这些属性的值发生改变时，watch 会执行指定的回调函数。例如：

const vm = new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  }
})

在这个例子中，watch 监听了 data 属性 count 的值，当 count 的值发生改变时，watch 回调函数就会执行，并在控制台输出 count 的旧值和新值。

异同

computed 和 watch 都有其独特的用途和优势，以下是它们的异同比较：

特性	computed	watch
目的	计算属性	监听器
依赖	依赖其他属性的值	监听一个或多个属性的值
执行时机	当依赖的属性值发生改变时	当监听的属性值发生改变时
返回值	一个值	一个回调函数
使用场景	适合计算一些复杂的、依赖于其他属性的值	适合监听某些属性的变化并执行相应的操作