前言
在 Vue 开发中，我们经常遇到基于现有数据推导新数据的场景：价格合计、筛选列表、文本格式化、状态判断。
很多新手直接在模板写复杂表达式、或在方法里频繁计算，导致代码混乱、重复计算、性能变差。
Vue3 提供的 computed 计算属性，就是专门解决「数据派生、数据格式化、依赖计算」的最优方案。
它最大的核心亮点：自带缓存、依赖不变就不重新执行，性能远超 methods。
本篇从零吃透计算属性原理、用法、场景、读写模式，彻底规范项目开发。
一、计算属性是什么（面试满分定义）
computed 是基于依赖数据自动计算、自带缓存的派生属性。
特点：
-
依赖不变，缓存结果不重复计算
-
依赖变化，自动重新计算
-
模板可直接使用，语法干净简洁
-
只做计算，不处理异步、不写副作用代码
二、基础语法（只读计算属性）
企业 90% 场景使用：只读派生数据。
<script setup> import { ref, computed } from 'vue' // 原始数据 const price = ref(99) const count = ref(2) // 计算属性：自动计算总价 const totalPrice = computed(() => { return price.value * count.value }) </script> <template> <p>单价：{``{ price }}</p> <p>数量：{``{ count }}</p> <p>总价：{``{ totalPrice }}</p> </template>
三、核心优势：缓存机制（面试重点）
我们对比 methods 方法 和 computed 计算属性：
-
methods ：页面每刷新一次、模板每渲染一次，都会重新执行，无缓存
-
computed ：只有依赖数据改变才重新执行，其余情况读取缓存值
高频渲染、复杂计算场景，computed 性能碾压 methods。
四、实战场景：列表筛选（项目超高频）
根据关键词筛选文章列表，最标准、最优雅的写法。
<script setup> import { ref, computed } from 'vue' // 原始文章列表 const articleList = ref([ { title: 'Vue3入门', content: 'xxx' }, { title: 'JS闭包原理', content: 'xxx' }, { title: '前端性能优化', content: 'xxx' } ]) // 搜索关键词 const searchKey = ref('') // 筛选后的列表（自动响应、自带缓存） const filterList = computed(() => { if(!searchKey.value) return articleList.value return articleList.value.filter(item => { return item.title.includes(searchKey.value) }) }) </script>
五、完整读写计算属性（get / set）
需要双向修改、反向赋值时使用，适合复杂表单联动。
const firstName = ref('张') const lastName = ref('三') const fullName = computed({ // 读取 get() { return firstName.value + lastName.value }, // 写入 set(val) { // 拆分赋值 firstName.value = val.slice(0,1) lastName.value = val.slice(1) } })
六、计算属性使用规范（企业准则）
✅ 适合做
-
数据筛选、过滤、排序
-
文本格式化、状态转换
-
多数据依赖计算（价格、积分、统计）
❌ 不适合做
-
异步请求、定时器
-
修改外部变量、产生副作用
-
复杂业务逻辑操作
七、面试必背问答
1. computed 和 methods 区别？
computed 自带缓存，依赖不变不重复计算，性能更高；methods 无缓存，每次渲染都会执行。computed 适合数据派生，methods 适合事件处理。
2. computed 可以写异步吗？
不建议、不规范。计算属性必须是纯函数，无副作用、无异步。异步监听使用 watch。
八、本篇结语
计算属性是 Vue 项目最优雅的数据处理方案。
学会 computed，你的模板代码会极度干净、逻辑高度复用、性能自动优化，彻底告别冗余判断与重复计算。
下一篇学习 watch / watchEffect 侦听器，搞定异步监听、数据联动、复杂表单，补齐 Vue3 数据响应闭环。