vue3中computed计算属性和watch监听的异同点

在 Vue 3 中，computed计算属性和watch监听器都是响应式系统的一部分，它们可以帮助你在数据变化时做出反应，但它们的使用场景和行为有一些区别。以下是它们的异同点：

相同点：

1. 响应式：
   两者都与 Vue 的响应式系统紧密结合，能够自动地跟踪依赖的数据变化，并根据这些变化做出响应。

2. 自动触发：
   当所依赖的数据变化时，computed和watch都会自动触发相关的更新。它们会自动检测哪些数据发生了变化，并对变化做出反应。

不同点：

1.用途

• computed：
  computed用于定义计算属性，是基于其他数据计算得出的值。通常用于在模板中绑定计算后的数据，并且计算值是基于其他响应式数据的依赖来自动更新的。它是一个getter，可以像普通的属性一样使用。

  例如，计算一个价格带税后的总金额：

  import { computed } from 'vue'; export default { setup() { const price = ref(100); const taxRate = ref(0.1); const totalPrice = computed(() => { return price.value * (1 + taxRate.value); }); return { price, taxRate, totalPrice }; } }

• watch：
  watch用于观察数据的变化并执行相应的副作用操作。当某个响应式数据发生变化时，你可以使用watch来执行某些操作，比如调用 API、执行复杂逻辑或更新其他数据等。

  例如，监听某个值的变化并执行异步操作：

  import { ref, watch } from 'vue'; export default { setup() { const count = ref(0); watch(count, (newVal, oldVal) => { console.log(`Count changed from ${oldVal} to ${newVal}`); // 执行一些副作用，例如 API 请求 }); return { count }; } }

2.返回值

• computed：
  computed返回的是一个计算值，你可以像访问普通数据一样访问它。它会缓存计算的结果，只有在依赖的数据变化时才会重新计算。

• watch：
  watch没有直接的返回值，它更多是执行某些副作用操作，通常用于监视数据变化并执行回调函数。它返回一个取消监听的函数，可以在不再需要监听时清理资源。

3.执行时机

• computed：
  计算属性是懒执行的，只有在访问它的时候才会触发计算。并且，如果依赖的值没有变化，computed的结果会被缓存，因此不会重复执行。

• watch：
  watch是立即执行的，它会在侦听的值变化时立即触发回调。可以选择在初始时是否执行一次回调。

4.副作用

• computed：
  计算属性通常用于纯计算值，没有副作用。它的作用是返回数据而不是改变数据。

• watch：
  watch经常用于执行副作用，比如执行某些操作或更新其他数据。它适用于需要响应数据变化并执行一些逻辑的场景。

5.使用场景

• computed：
  当你需要基于已有数据计算出一个衍生的值并在模板中使用时，使用computed比较合适。例如：计算某个值的和、差、乘积等。

• watch：
  当你需要对某个数据变化进行监听，并在数据变化时执行某些操作时，使用watch。例如：发起 API 请求、触发异步操作等。

总结：

• computed：适用于需要计算并返回一个新值的场景，值会缓存，只有依赖的数据变化时才会重新计算。
• watch：适用于需要响应数据变化并执行副作用的场景，比如执行异步请求、处理复杂的业务逻辑等。

根据需求选择合适的工具来处理响应式数据，computed更适合用于数据的衍生，而watch更适合用于执行副作用操作。