vue中computed和watch区别

在 Vue 中，computed 和 watch 都是用来响应式地处理数据变化的工具，但它们的用途和行为有明显区别。

---

🔍 一句话总结

• computed：用于声明式计算属性，有缓存。
• watch：用于监听响应式数据的变化并执行副作用逻辑，无缓存。

---

🧠 computed（计算属性）

✅ 特点：

• 有缓存：只有依赖的数据发生变化时，才会重新计算。
• 适用于：从已有的数据中派生出新数据，用于模板中绑定或复杂逻辑的复用。
• 声明式：用于表示“这个值是根据什么计算出来的”。

📌 示例：

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});
</script>

✅ 优点：fullName 只有在 firstName 或 lastName 改变时才重新计算。

---

👀 watch（侦听器）

✅ 特点：

• 无缓存：只要监听的数据发生变化就会触发回调。
• 适用于：执行异步操作、请求接口、副作用逻辑等。
• 命令式：用于处理数据变化后要做的事情。

📌 示例：

<script setup>
import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log('Query changed from', oldVal, 'to', newVal);
  // 例如发请求
});
</script>

✅ 常用于监听用户输入、数据变化时触发 API 请求、执行副作用等。

---

🆚 区别对比表

特性	computed	watch
是否有缓存	✅ 有	❌ 无
典型用途	派生新值（如模板中展示）	监听变化执行副作用（如请求/存储）
写法风格	声明式	命令式
是否必须有返回值	✅ 必须返回值	❌ 不需要（一般是执行回调）
支持异步操作	❌ 不推荐（不适合）	✅ 支持

---

🚀 总结使用场景

场景	使用建议
根据已有状态组合出一个新值	computed
响应数据变化并执行副作用（如请求）	watch
想避免重复计算，提高性能	computed
想监控某个数据的变化并执行一些逻辑	watch

---