vue3 的 computed 创建响应式计算属性，依赖响应式数据自动缓存并按需求值；只读形式传入箭头函数，返回 computedref 需加 .value 读取；可读写形式通过 get/set 对象支持双向绑定，set 中更新源数据而非 computed 本身。
Vue3 中用 computed 创建组合式计算属性，核心是“依赖响应式数据、自动缓存、按需求值”。它不是手动调用的函数，而是一个响应式引用（Ref），其值会随依赖变化自动更新，且不重复计算。
只读计算属性：最常用写法
适用于派生数据、格式化、过滤等场景，无需修改，只需读取结果。
- 用
ref或reactive定义原始响应式数据 - 传入一个箭头函数给
computed()，函数体内访问响应式数据的.value（ref）或属性（reactive） - 返回的是一个
ComputedRef，使用时必须加.value
示例：
import { ref, computed } from 'vue'
<p>const price = ref(99)
const count = ref(3)</p><p>// 总价是 price × count，依赖二者
const totalPrice = computed(() => price.value * count.value)</p><p>console.log(totalPrice.value) // 297
count.value = 5
console.log(totalPrice.value) // 495（自动更新）
</p>
可读可写计算属性：支持双向绑定
当需要通过修改计算属性来反向影响原始数据时（比如 v-model 绑定输入框），用对象形式传入 get 和 set。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章