###
Vue3 中
computed 和 watch 的区别
#### 1
. **功能与用途**
computed 主要用于依赖缓存的计算逻辑，其结果会被缓存，只有在依赖的数据发生变化时才会重新计算。这使得
computed 非常适合用于数据的复杂计算或组合多个响应式数据源的场景。
watch 用于监听数据的变化并执行副作用，通常用于执行异步操作或复杂的业务逻辑。它不会缓存结果，只要监听的数据发生变化，就会触发回调函数[^2]。
#### 2
. **缓存机制**
computed 是基于其依赖进行缓存的，只有依赖的数据发生变化时，才会重新计算。如果依赖的数据没有变化，多次访问
computed 属性会直接返回缓存的结果。这使得
computed 在性能优化上具有优势。
watch 没有缓存机制，只要监听的数据发生变化，无论是否影响最终结果，都会触发回调函数。这使得
watch 更适合处理不需要缓存且需要立即响应数据变化的场景[^
3]。
####
3. **异步操作支持**
computed 不适合执行异步操作，因为它的设计初衷是同步返回计算结果。如果在
computed 中执行异步操作，可能会导致返回值为 `Promise` 或者无法正确更新依赖。
watch 允许在数据变化时执行异步操作或复杂的逻辑，例如网络请求、定时器操作等。这是
watch 的一大优势，适用于需要在数据变化后进行复杂处理的场景[^
3]。
#### 4
. **监听方式**
computed 只能监听其依赖的数据，并且这些依赖必须是响应式的。
computed 的依赖是自动追踪的，无需手动指定。
watch 需要显式指定要监听的数据，支持监听单个值、对象或数组。对于对象或数组的深度监听，需要
使用 `deep: true` 选项。此外，
watch 还支持监听多个数据源，通过 `
watchEffect` 可以自动追踪依赖。
#### 5
. **
使用场景**
- **
computed** 适用于以下场景：
- 数据的组合或格式化（例如拼接姓名、格式化日期等）。
- 需要缓存计算结果以提高性能。
- 基于多个响应式数据的同步计算。
- **
watch** 适用于以下场景：
- 数据变化后需要执行异步操作（例如 API 请求）。
- 数据变化后需要执行复杂的逻辑（例如更新多个状态或触发副作用）。
- 需要监听对象或数组的变化并进行深度处理。
#### 6
. **代码示例**
以下是一个简单的代码示例，展示了
computed 和 watch 的用法：
```
vue
<template>
<div>
<p>姓名：<input v-model="name" /></p>
<p>城市：<input v-model="city" /></p>
<p>个人信息：{{ userInfo }}</p>
</div>
</template>
<script>
import { ref,
computed,
watch } from &#
39;
vue&#
39;;
export default {
setup() {
const name = ref(&#
39;张三&#
39;);
const city = ref(&#
39;北京&#
39;);
//
computed 示例
const userInfo =
computed(() => {
return `${name
.value} - ${city
.value}`;
});
//
watch 示例
watch(
() => name
.value,
(newVal, oldVal) => {
console
.log(`name 从 ${oldVal} 改为 ${newVal}`);
}
);
watch(
() => city
.value,
(newVal, oldVal) => {
console
.log(`city 从 ${oldVal} 改为 ${newVal}`);
}
);
return { name, city, userInfo };
},
};
</script>
```
#### 7
. **总结**
computed 和 watch 在
Vue3 中各有侧重：
-
computed 更适合用于基于依赖的同步计算，并且具有缓存特性，可以提升性能。
-
watch 更适合用于监听数据变化后执行异步操作或复杂逻辑，没有缓存机制，直接响应数据变化。
在实际开发中，合理选择
computed 和 watch 能够提高代码的可维护性
和性能。对于简单的数据组合
和格式化，优先
使用 computed；对于需要异步操作或复杂逻辑的场景，则
使用 watch。
---
本文介绍了Vue3中计算属性的使用方法，包括如何创建只读和可写计算属性。通过实例展示了计算属性如何依赖响应式引用，并能自动更新视图。
扫一扫
918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
