揭秘 Vue3 中 computed、watch 和 watchEffect 的奥秘， 助力高效开发

深入浅出：Vue3 中的 computed、watch 和 watchEffect

什么是 computed？

想象一下一个复杂的计算器，它需要根据几个输入值进行计算。在 Vue3 中，你可以使用 computed 属性来创建这样的计算器。只需定义一个函数，它依赖于其他数据属性，然后将其声明为一个计算属性。每当依赖数据发生变化时，计算属性就会自动重新计算并更新其值。

// 定义一个计算属性，计算 name 和 age 的拼接值
const fullName = computed(() => {
  return `${name.value} is ${age.value} years old`;
});

什么时候使用 computed？

• 当你需要一个计算属性时，该属性依赖于其他数据属性，并且你希望它在依赖属性发生变化时自动更新。
• 当你希望将复杂的计算逻辑与表示层代码分离时。

什么是 watch？

watch 就像一个守卫，监视着一个数据属性或表达式。当被监视的数据发生变化时，它就会触发一个回调函数。你可以使用这个回调函数来执行任何所需的逻辑，例如更新其他数据属性、显示通知或执行异步操作。

// 监视 age 数据属性，并在其变化时更新 message
watch('age', (newVal, oldVal) => {
  message.value = `Age changed from ${oldVal} to ${newVal}`;
});

什么时候使用 watch？

• 当你需要监听一个数据属性或表达式的变化时，并且希望在变化发生时执行特定的逻辑。
• 当你想要控制回调函数的执行时机和行为时。

什么是 watchEffect？

watchEffect 是 Vue3 中引入的一个新特性。它允许你创建一个副作用函数，该函数会在其依赖项发生变化时自动执行。副作用函数可以执行任何操作，例如修改 DOM、发出网络请求或触发事件。

// 定义一个副作用函数，在 name 或 age 发生变化时更新 DOM
watchEffect(() => {
  document.getElementById('name').innerText = name.value;
  document.getElementById('age').innerText = age.value;
});

什么时候使用 watchEffect？

• 当你需要定义一个副作用函数时，该函数会在其依赖项发生变化时自动执行。
• 当你希望简洁地处理复杂副作用时。

总结

computed、watch 和 watchEffect 都是 Vue3 中强大的响应式特性，可以让你轻松创建响应式应用程序。选择使用哪种特性取决于你的特定需求。

常见问题解答

1. computed、watch 和 watchEffect 之间的主要区别是什么？

   • computed 是声明式的，而 watch 和 watchEffect 是命令式的。
   • computed 只会在依赖项发生变化时重新计算，而 watch 和 watchEffect 会在每次组件更新时重新执行。

2. 什么时候应该使用 computed？

   • 当你需要一个计算属性时，该属性依赖于其他数据属性，并且你希望它在依赖属性发生变化时自动更新。

3. 什么时候应该使用 watch？

   • 当你需要监听一个数据属性或表达式的变化时，并且希望在变化发生时执行特定的逻辑。

4. 什么时候应该使用 watchEffect？

   • 当你需要定义一个副作用函数时，该函数会在其依赖项发生变化时自动执行。

5. 我可以同时使用 computed、watch 和 watchEffect 吗？

   • 是的，你可以根据需要组合使用这些特性。