Vue.js 中的 computed 与 watch：异曲同工，各显神通

Vue.js 中 computed 与 watch 的异同

• 相同点：
  • computed 和 watch 都用于响应式数据。
  • computed 和 watch 都可以接收一个函数作为参数。
  • computed 和 watch 都可以返回一个值。
• 不同点：
  • computed 计算属性用于从其他数据派生出新的数据，而 watch 则用于监听数据的变化并执行相应的操作。
  • computed 计算属性支持缓存，即当依赖的数据没有发生变化时，computed 计算属性不会重新计算。而 watch 不支持缓存，即当依赖的数据发生变化时，watch 会立即触发相应的操作。
  • computed 计算属性的函数只会在组件实例化时执行一次，而 watch 的函数会在组件实例化时执行一次，并且会在依赖的数据发生变化时重新执行。
  • computed 计算属性不支持异步操作，而 watch 支持异步操作。

Vue.js 中 computed 与 watch 的使用场景

• computed 计算属性适用于以下场景：
  • 从其他数据派生出新的数据，例如计算总价、平均值等。
  • 在模板中使用计算属性，可以提高代码的可读性和可维护性。
• watch 适用于以下场景：
  • 监听数据的变化并执行相应的操作，例如在数据发生变化时更新 UI、发送网络请求等。
  • watch 可以监听对象属性、数组项的变化，还可以监听组件实例的属性变化。

Vue.js 中 computed 与 watch 的代码示例

// computed 计算属性
const computed = {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

// watch 监听
const watch = {
  firstName(newValue, oldValue) {
    console.log('firstName changed from', oldValue, 'to', newValue);
  },
  lastName(newValue, oldValue) {
    console.log('lastName changed from', oldValue, 'to', newValue);
  }
};

总结

computed 计算属性和 watch 都是 Vue.js 中用于响应式数据的重要特性。computed 计算属性用于从其他数据派生出新的数据，而 watch 则用于监听数据的变化并执行相应的操作。理解它们的异同并合理使用它们，可以帮助您编写出更具响应性和可维护性的 Vue.js 代码。