企业官网建设流程全解析

前言

在 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 数据响应闭环。