Vue 3 响应式数据怎么用 computed 计算属性-Vue.js-PHP中文网

computed 是 vue 3 中基于响应式数据自动追踪依赖、惰性求值且缓存结果的只读或可写引用对象；基础写法传入 getter 函数返回 ref 类型，进阶支持 get/set 实现双向绑定，禁用副作用，区别于每次调用都执行的 methods。

vue 3 响应式数据怎么用 computed 计算属性

Vue 3 中用 computed 定义计算属性，核心是基于响应式数据（ref 或 reactive）自动追踪依赖、惰性求值、结果缓存。它不是普通函数，而是一个具备响应式行为的只读（或可写）引用对象。

基础写法：只读计算属性

适用于从已有响应式数据派生新值，且无需修改的场景：

导入 computed 和响应式工具（如 ref）
传入一个纯 getter 函数，内部访问响应式变量（如 count.value）
返回值是 Ref 类型，需通过 .value 访问（在模板中可省略）

示例：

import { ref, computed } from 'vue'
const count = ref(5)
const double = computed(() => count.value * 2)
// double 是 Ref，double.value === 10

进阶写法：可写的计算属性

当需要支持双向绑定（比如表单联动）时，用对象形式定义 get 和 set：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

get 返回当前计算值
set 接收新值，并反向更新其依赖的原始数据
必须保证 set 逻辑是可逆的，否则会破坏响应式一致性

示例：

const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
  get() { return `${firstName.value} ${lastName.value}` },
  set(newValue) {
    const parts = newValue.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})

关键注意事项

避免踩坑，才能发挥 computed 的优势：

不要在 getter 中执行异步操作（如 await）、发送请求、修改 DOM 或触发事件——这属于副作用，应交给 watch 或 watchEffect
计算逻辑尽量轻量；若涉及大量数组过滤、深度遍历等开销操作，需评估是否真需实时响应，或考虑防抖/节流 + 缓存策略
依赖必须是响应式数据；直接访问普通 JS 变量（如 const x = 1）不会触发更新
在 setup 中定义的 computed 可直接在模板中使用，无需额外解构或暴露