vue 3 的 computed 本质是创建响应式派生值，自动追踪依赖、缓存结果并惰性求值；支持只读（函数）和读写（get/set 对象）两种写法，需通过 .value 访问，不可执行副作用。
Vue 3 的 computed 本质是创建一个响应式的“派生值”，它会自动追踪依赖、缓存结果，并在依赖变化时重新计算——不是普通函数，也不是 watch 的替代品，而是用于安全、高效地封装响应式逻辑。
一、基础写法：用函数返回派生值
最常用的是只读计算属性，传入一个 getter 函数：
import { ref, computed } from 'vue'
<p>const count = ref(0)
const doubleCount = computed(() => count.value * 2)</p><p>// 使用时直接 .value（因为 computed 返回的是 Ref）
console.log(doubleCount.value) // 0
count.value++
console.log(doubleCount.value) // 2</p>注意：必须通过 .value 读取（因为 computed() 返回的是一个 Ref 对象），模板中可省略 .value，Vue 会自动解包。
二、进阶写法：读写计算属性（带 set）
当需要支持赋值并反向影响源数据时，传入一个对象，含 get 和 set：
const firstName = ref('John')
const lastName = ref('Doe')
<p>const fullName = computed({
get() {
return <code>${firstName.value} ${lastName.value}</code>
},
set(newValue) {
const parts = newValue.split(' ')
firstName.value = parts[0] || ''
lastName.value = parts[1] || ''
}
})</p><p>fullName.value = 'Alice Smith'
console.log(firstName.value) // 'Alice'
console.log(lastName.value) // 'Smith'</p>这种写法适合表单联动、别名映射等双向场景，但要确保 set 中只修改原始响应式数据，避免副作用。
三、正确使用的关键细节
- 不要在 computed 中执行副作用（如发请求、改 DOM、调用非响应式方法），它只负责“算出一个值”
-
依赖必须是响应式数据（
ref、reactive、props等），普通变量或函数参数不会触发更新 - 避免在 getter 中修改响应式数据，否则可能引发循环更新或警告
- 计算属性是惰性求值 + 缓存的：只要依赖没变，多次访问
.value不会重复执行 getter
四、和 watch、methods 的区别在哪？
-
methods：每次渲染都执行，不缓存，适合事件处理或一次性操作 -
watch：监听变化后执行副作用（如异步请求、路由跳转），不返回值 -
computed：专注声明式地定义一个新值，值随依赖自动更新，且可被其他响应式逻辑复用
比如筛选列表、格式化日期、判断按钮是否禁用——这些“基于状态的状态”，就该交给 computed。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
