网站网页设计前言网站概要设计模板
在 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 |