Composition API 中的计算属性与侦听
使用 computed() 派生状态，以及使用 watch() 和 watchEffect() 处理副作用。
Composition API 中的计算属性与侦听 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
派生状态并响应变化
响应式状态只是其中一半。您还需要从状态中派生新值，并响应变化。组合式 API 为此提供了 computed、watch 和 watchEffect。
使用 computed 获取派生值
computed() 接收一个获取函数，并返回一个 ref，其值派生自其他响应式状态。在 JS 中使用 .value 访问它，在模板中则会自动解包。
import { ref, computed } from 'vue'
const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4computed 具有惰性和缓存特性
只有当某个响应式依赖发生变化时，computed 才会重新计算。如果在没有变化的情况下读取它十次，获取函数只会运行一次，之后会重复使用缓存的结果。
这使 computed 非常适合计算成本较高的派生值。
computed 会自动更新
修改依赖后，computed 会在下次读取时更新。您不需要手动调用它。
const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10使用 watch 处理副作用
watch() 会观察一个响应式来源，并在它发生变化时运行回调函数。回调函数会接收新值和旧值。
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('changed from', oldVal, 'to', newVal)
})watch 默认具有惰性
与 computed 不同，watch 不会立即运行回调函数，而是等待第一次变化。请将它用于副作用，例如记录日志、获取数据和保存到存储中。
观察多个来源
将来源组成数组传给 watch，即可同时观察多个值。回调函数会接收由新值和旧值组成的数组。
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName)
})观察获取函数
若要观察响应式对象的某个属性，请传入一个获取函数。直接观察对象时，只有发生深层变化才会触发，这可能会令人困惑。
const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
console.log('count is', newVal)
})watchEffect：立即运行并自动跟踪
watchEffect() 会立即运行其函数，并在函数内部使用的任何响应式值发生变化时重新运行。您不需要列出依赖项，因为它们会被自动跟踪。
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log('count is', count.value)
})
// logs immediately, then on every changewatch 与 watchEffect
watch：来源明确、具有惰性，并提供旧值和新值。watchEffect：自动跟踪依赖项、立即运行，无法访问旧值。
当您需要先前的值或希望进行精确控制时，使用 watch。对于快速实现响应式副作用，使用 watchEffect。
computed 与 watch 的区别
如果您需要一个新的派生值，请使用 computed。如果您需要在发生变化时执行某项操作，请使用 watch 或 watchEffect。不要使用 watch 重新计算值——这正是 computed 的用途。
快速检查
请选择正确的响应式辅助工具。
回顾
现在您已经了解如何派生值以及响应变化：
computed会创建惰性求值且经过缓存的派生值。watch会响应特定数据源，并提供新值和旧值；它是惰性的。watchEffect会立即执行，并自动追踪依赖。- 值应使用 computed，副作用应使用 watch/watchEffect。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 42
- 课程
- 156
常见问题解答
「Composition API 中的计算属性与侦听」课时是免费的吗？
是的 — 「Composition API 中的计算属性与侦听」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「Composition API 中的计算属性与侦听」这节课中我会学到什么？
使用 computed() 派生状态，以及使用 watch() 和 watchEffect() 处理副作用。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「Composition API 中的计算属性与侦听」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 为什么使用 Composition API？
- setup() 函数与响应式变量
- ref 与 reactive：何时使用哪一个
- Composition API 中的计算属性与侦听