computed 和 watch 的区别和运用的场景

简介

在 Vue.js 中，computed 和 watch 都是常用的数据监控方法。它们都可以监视数据变化，但实现方式和适用场景不同。

computed

computed 是一种计算属性，可以根据其他数据计算出新的值，并且会缓存结果。当依赖的数据发生变化时，computed 会自动更新计算结果。computed 常用于处理复杂或频繁使用的计算。

示例

复制代码
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

上述代码中，reversedMessage 是一个计算属性，它将 message 字符串反转后输出。

watch

watch 是一种观察者模式，可以监听数据变化并执行回调函数。每当被监视的数据发生改变时，watch 就会自动执行回调函数，可用于执行异步操作、发送请求等。

示例

复制代码
<template>
  <div>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`New value: ${newVal}. Old value: ${oldVal}`);
    },
  },
};
</script>

上述代码中，watch 监视了 message 数据的变化，并在控制台输出新旧值。

区别

• computed 是一种计算属性，会自动缓存结果，适合处理复杂和频繁使用的计算。watch 则是一种观察者模式，需要手动执行回调函数，可用于执行异步操作等。
• computed 只有依赖的数据发生改变时才会重新计算，因此性能更高。而 watch 监听的数据每次发生变化都会执行回调函数，因此可能会造成性能瓶颈。
• 如果需要处理数据变化后执行其他操作，或监听数组或对象的变化，应该使用 watch。如果需要对数据进行计算并且结果会频繁使用，应该使用 computed。

结论

综上所述，computed 和 watch 都是 Vue.js 中常用的数据监控方法，它们比较的标准主要是是否需要对数据进行计算，并且计算结果是否会被频繁使用。在实际开发中，需要根据具体场景选择使用 computed 或 watch。## 运用场景

computed 的运用场景

• 根据数据计算出新的值并频繁使用，例如对字符串进行截取、格式化等操作。
• 对数据进行排序、过滤等操作，例如对数组中的元素进行排序、筛选操作。
• 配合 v-model 双向绑定使用，处理表单数据校验等情况。

watch 的运用场景

• 监听数据变化后执行其他操作，例如发送请求、更新页面等。
• 监听数组或对象的变化，例如对数组中添加、删除元素时执行特定操作。
• 处理异步操作，例如监听搜索框输入内容发生变化后执行搜索操作。

注意事项

• 不要在 computed 中修改数据，否则可能导致性能问题和错误。
• 不要在 watch 中修改被监控的数据，否则可能引起死循环和数据不一致问题。
• 尽量避免在 computed 和 watch 中进行复杂的逻辑处理和异步操作，避免影响应用性能和用户体验。

总结

computed 和 watch 是 Vue.js 中常用的数据监控方法，它们的区别和运用场景也有所不同。在实际开发中，需要根据具体场景选择使用 computed 或 watch，并注意避免出现相关的错误和性能问题。