Vue.js中computed和watch的区别与应用场景

前端

2023-11-18 08:12:09

computed和watch的异同

相同点
- computed和watch都是用来响应式地追踪数据变化的工具。
- 它们都可以在组件模板中使用，并且当依赖的数据发生变化时，组件将会重新渲染。
不同点
- computed是一个计算属性，它只在数据发生变化时才计算一次，然后将结果缓存起来。这意味着，如果数据没有发生变化，那么computed的值也不会发生变化。
- watch是一个侦听器，它会在每次数据发生变化时触发一个回调函数。这意味着，无论数据是否发生变化，watch都会被触发。

computed的适用场景

当您需要一个只在数据发生变化时才计算一次的值时，可以使用computed。
例如，您可以使用computed来计算一个列表的总和，或者计算一个字符串的长度。

watch的适用场景

当您需要在每次数据发生变化时执行某个操作时，可以使用watch。
例如，您可以使用watch来更新组件的样式，或者在数据发生变化时触发一个网络请求。

性能优化

如果您需要计算一个值，并且您知道该值不会经常发生变化，那么您可以使用computed来优化性能。
这是因为computed只在数据发生变化时才计算一次，然后将结果缓存起来。这意味着，如果您多次访问该值，那么您不必重新计算它。

实例

// 计算属性
const computed = {
  total: function() {
    return this.items.reduce((total, item) => total + item, 0);
  }
};

// 侦听器
const watch = {
  items: {
    handler(newVal, oldVal) {
      console.log('Items have changed from ${oldVal} to ${newVal}');
    },
    deep: true
  }
};