深入 Vue 3 computed：原理、实战与避坑指南

深入 Vue 3 `computed`：原理、实战与避坑指南

在 Vue 3 的开发中，computed（计算属性）不仅仅是一个语法糖，它是连接响应式数据与视图渲染的"智能桥梁"。对于希望通过文章向读者传递深度知识的你来说，理解其缓存机制 、读写控制 以及与 watch/methods 的本质区别至关重要。

以下内容结构适合用于技术文章，涵盖了从核心原理到高阶实战的完整逻辑。

核心机制：为什么它比 Methods 更高效？

缓存是灵魂
computed 与 methods 最大的区别在于缓存。

methods：只要组件重新渲染，调用就会执行，不管依赖的数据变没变。
computed ：基于响应式依赖进行缓存。只要依赖的响应式数据（如 ref、reactive）没有改变，无论访问多少次，它都直接返回缓存的结果，不会重新执行 getter 函数。

响应式追踪

在 Vue 3 的响应式系统中，计算属性是一个特殊的 effect。当你读取计算属性时：

求值：执行 getter 函数。
收集依赖 ：Vue 会自动追踪 getter 中用到的响应式数据（例如 count.value）。
建立联系：计算属性会订阅这些数据的变化。一旦数据更新，计算属性会收到通知，标记自己为"脏数据"，下次读取时才会重新计算。

基础用法：只读与可写

在 Composition API 中，computed 的用法非常灵活。

只读计算属性

这是最常见的场景，适用于数据展示、过滤等。

javascript 复制代码

import { ref, computed } from 'vue'

const todos = ref([
  { text: 'Learn Vue', done: true },
  { text: 'Learn React', done: false }
])

// 只读：返回已完成的列表
const doneTodos = computed(() => {
  return todos.value.filter(todo => todo.done)
})

可读写计算属性

通过定义 get 和 set，你可以创建双向绑定的"虚拟变量"。

javascript 复制代码

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // 读取时
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  // 修改时 (例如 v-model 绑定)
  set(newValue) {
    const [first, last] = newValue.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

进阶实战：解决复杂业务痛点

场景一：表单的双向绑定代理

利用 set，你可以将一个复杂的表单输入映射到多个底层状态。

javascript 复制代码

// 假设有一个价格输入框，需要同时控制"是否含税"和"税率"
const price = ref(100)
const taxRate = ref(0.1)

const displayPrice = computed({
  get() {
    // 显示含税价格
    return price.value * (1 + taxRate.value)
  },
  set(newValue) {
    // 用户输入的是含税价，反向计算原价
    price.value = newValue / (1 + taxRate.value)
  }
})

场景二：多层级对象的扁平化代理

处理深层嵌套对象时，计算属性可以简化模板逻辑。

javascript 复制代码

const user = ref({
  profile: { theme: 'dark', lang: 'zh' }
})

const theme = computed({
  get() { return user.value.profile.theme },
  set(val) { user.value.profile.theme = val }
})

核心对比：Computed vs Watch vs Methods

这是面试和架构设计中的高频考点，也是文章中需要强调的重点。

维度	`computed`	`methods`	`watch`
本质	数据派生 (声明式)	动作执行 (命令式)	副作用处理 (观察者模式)
缓存	有 (依赖不变不执行)	无 (每次调用都执行)	不适用 (只在变化时触发)
返回值	必须有 (返回新数据)	任意	无 (执行逻辑)
适用场景	模板中复杂的逻辑、过滤列表	事件处理、按钮点击	异步请求、路由跳转、复杂状态同步

避坑指南：常见错误与解决方案

陷阱一：在 Getter 中做异步操作
错误：试图在 computed 中发起 API 请求。
后果：由于缓存机制，异步请求可能不会按预期触发，或者无法正确更新视图。
正解：使用 watch 监听数据变化，然后执行异步操作。

陷阱二：修改计算属性的返回值

计算属性返回的是一个"快照"。直接修改它（如 arr.push）是无效且危险的。
正解：永远通过修改源数据（Source of Truth）来触发计算属性的更新。

陷阱三：依赖了非响应式数据

如果你的计算属性依赖了普通的 JavaScript 变量（非 ref/reactive），Vue 无法追踪变化，导致计算属性只执行一次 。
正解：确保所有依赖的数据都是响应式的。

总结

computed 是 Vue 3 响应式系统的精髓所在。它通过声明式 的编程思维，让你专注于"数据是什么"，而不是"什么时候去更新"。在撰写文章时，建议通过具体的代码对比（使用与不使用 computed 的性能差异）来直观展示其价值，这将极大地提升读者的理解。