为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点？

---

url: /posts/372acc3d3dcd47da62c48c4cf6ad9d5c/
title: 为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点？
date: 2025-11-09T07:04:22+08:00
lastmod: 2025-11-09T07:04:22+08:00
author: cmdragon

summary:
计算属性（Computed）是Vue 3中用于派生状态的核心API，能够将复杂逻辑从模板中抽离，提升代码简洁性和可维护性。计算属性通过缓存机制优化性能，仅在依赖的响应式数据变化时重新计算，而方法则每次调用都会执行。可写计算属性允许通过getter和setter实现双向同步，Vue 3.4+还支持获取计算属性的之前值，用于保留历史状态。使用时应保持getter无副作用，避免直接修改计算属性值。

categories:

vue

tags:

基础入门
Vue 3 计算属性Options APIComposition API缓存机制可写计算属性最佳实践

---

扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长

发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/

一、计算属性的基本使用

计算属性（Computed）是Vue 3中用于派生状态的核心API，它能将复杂的逻辑从模板中抽离，让代码更简洁、可维护。

1.1 为什么需要计算属性？

模板表达式（如
{{ author.books.length > 0 ? 'Yes' : 'No' }}）适合简单逻辑，但如果逻辑复杂或需要重复使用，直接写在模板里会有两个问题：

模板臃肿：大量逻辑会让模板难以阅读；代码冗余：同一逻辑重复写多次，维护成本高。

计算属性的作用就是将派生逻辑封装成“虚拟属性”，让模板只负责展示，逻辑交给计算属性处理。

1.2 Options API 中的计算属性

在Options API中，计算属性通过
computed选项定义，它是一个对象，键是计算属性名，值是getter函数（用于计算值）。

示例：判断作者是否有出版书籍

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery']
      }
    }
  },
  computed: {
    // 计算属性的getter函数
    publishedBooksMessage() {
      // this 指向组件实例，自动追踪author.books的变化
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

模板中直接使用计算属性，和普通data属性一样：

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

1.3 Composition API 中的计算属性（
<script setup>）

在Composition API中，使用
computed()函数创建计算属性，返回的是computed ref（可响应的引用类型）。

示例（与上面功能一致）：

<script setup>
import { reactive, computed } from 'vue'

// 响应式数据：作者信息
const author = reactive({
  name: 'John Doe',
  books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery']
})

// 计算属性：判断是否有书籍
const publishedBooksMessage = computed(() => {
  // 依赖author.books，自动追踪变化
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span> <!-- 自动解包，无需.value -->
</template>

注意：


computed()函数接收一个getter函数，返回的
publishedBooksMessage是
ComputedRef类型；在模板中，computed ref会自动解包（不用写
.value）；在
<script>中访问时，需要用
.value（如
publishedBooksMessage.value）。

二、计算属性的缓存机制：与方法的本质区别

计算属性和方法都能实现逻辑复用，但缓存机制是它们的核心区别。

2.1 缓存的意义：性能优化

计算属性的结果会基于依赖自动缓存——只有当依赖的响应式数据变化时，才会重新计算；否则直接返回缓存值。

而方法没有缓存，每次调用（如模板渲染、函数调用）都会重新执行逻辑。

示例：对比计算属性和方法

// 计算属性：缓存结果
const expensiveComputed = computed(() => {
  console.log('计算属性执行了')
  return heavyCalculation() // 假设这是一个耗时操作
})

// 方法：无缓存
function expensiveMethod() {
  console.log('方法执行了')
  return heavyCalculation()
}

当依赖不变时，多次访问
expensiveComputed.value，只会打印一次“计算属性执行了”；多次调用
expensiveMethod()，每次都会打印“方法执行了”。

2.2 依赖追踪：只更新必要的计算

Vue会自动追踪计算属性的依赖（即getter函数中用到的响应式数据），只有依赖变化时，计算属性才会重新计算。

反例：依赖非响应式数据

const now = computed(() => Date.now()) // Date.now()不是响应式数据

无论过多久，
now.value都不会更新——因为Vue无法追踪
Date.now()的变化。

三、可写计算属性：处理双向逻辑

默认情况下，计算属性是只读的（只有getter），但在某些场景下，我们需要通过计算属性反向修改源数据（如
fullName同步
firstName和
lastName），这时可以用可写计算属性（同时定义getter和setter）。

3.1 场景需求：双向同步

比如，我们有
firstName和
lastName两个响应式数据，希望通过
fullName（如“John Doe”）同时读取和修改它们：

读取
fullName时，返回
firstName + ' ' + lastName；修改
fullName时，将新值拆分成
firstName和
lastName。

3.2 可写计算属性的实现

可写计算属性需要同时定义
get（读取逻辑）和
set（修改逻辑）。

Options API 写法：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter：组合firstName和lastName
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter：拆分新值到firstName和lastName
      set(newValue) {
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

Composition API 写法：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter：组合firstName和lastName
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter：拆分新值到firstName和lastName
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

使用示例：

// 修改fullName，会同步更新firstName和lastName
fullName.value = 'Jane Smith'
console.log(firstName.value) // Jane
console.log(lastName.value)  // Smith

四、获取计算属性的之前值

Vue 3.4新增了获取计算属性之前值的能力，通过
computed()函数的
previous参数实现。这在需要保留历史状态的场景中很有用（如“只能减小不能超过某个值”）。

4.1 应用场景：保留历史状态

比如，我们希望
alwaysSmall始终返回
count的值，但当
count超过3时，保持之前的最大值（3）：

<script setup>
import { ref, computed } from 'vue'

const count = ref(2)
const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value // 当count≤3时，返回当前值
  }
  return previous // 当count>3时，返回之前的value（最大是3）
})
</script>

效果：

当
count从2→3→4时，
alwaysSmall.value依次是2→3→3；当
count从4→2时，
alwaysSmall.value变回2。

五、计算属性的最佳实践

为了避免踩坑，使用计算属性时需遵循以下规则：

5.1 保持 getter 无副作用

计算属性的
getter应该是纯函数——只依赖输入计算输出，不修改任何外部状态（如修改其他响应式数据、发送请求、操作DOM）。

反例（错误写法）：

const badComputed = computed(() => {
  this.author.name = 'Jane' // 错误：修改了其他状态
  return this.author.books.length > 0 ? 'Yes' : 'No'
})

这样会导致逻辑混乱，因为
getter的职责是计算值，而不是修改状态。修改状态的操作应该放在
methods或
watch中。

5.2 不要直接修改计算属性的值

计算属性是派生状态（由源数据计算而来），直接修改计算属性的值是没有意义的——因为它会被下一次计算覆盖。

反例（错误写法）：

// publishedBooksMessage是计算属性（无setter）
publishedBooksMessage.value = 'No' // 错误：只读属性

正确的做法是修改源数据（如
author.books = []），让计算属性自动更新。

六、课后 Quiz：巩固你的理解

问题1：计算属性和方法的核心区别是什么？

答案：
计算属性基于依赖缓存，只有依赖变化时才重新计算；方法无缓存，每次调用都重新执行。
解析：缓存是计算属性的核心优势，适合需要重复使用且依赖稳定的逻辑（如过滤列表）；方法适合不需要缓存的场景（如事件处理）。

问题2：如何创建一个可写的计算属性？

答案：
通过同时定义
get（读取逻辑）和
set（修改逻辑）实现：

Options API：在
computed选项中写
{ get() {}, set(newValue) {} }；Composition API：调用
computed({ get() {}, set(newValue) {} })。
示例：参考“三、可写计算属性”中的
fullName例子。

问题3：为什么计算属性中使用
Date.now()不会更新？

答案：
因为
Date.now()不是响应式依赖，Vue无法追踪它的变化。计算属性只会在依赖的响应式数据变化时重新计算。
拓展：如果需要实时获取时间，应该用
setInterval或
watch，而不是计算属性。

七、常见报错及解决方案

报错1：计算属性返回
undefined

原因：
getter函数没有返回值（忘记写
return）。
示例：

const badComputed = computed(() => {
  author.books.length > 0 ? 'Yes' : 'No' // 忘记return
})

解决：确保
getter函数有
return语句。

报错2：无法修改只读计算属性

报错信息：
Set operation on key "xxx" failed: computed value is readonly
原因：尝试修改无setter的计算属性（默认是只读的）。
解决：

如果需要修改，给计算属性添加
setter（参考“三、可写计算属性”）；不要直接修改计算属性，改为修改源数据。

报错3：计算属性不随数据更新

原因：

依赖了非响应式数据（如普通变量，不是
ref/
reactive）；
getter函数中没有用到响应式数据（即无依赖）。
解决：
将数据转为响应式（用
ref或
reactive包裹）；确保
getter函数中用到了响应式数据。

参考链接

https://vuejs.org/guide/essentials/computed.html

余下文章内容请点击跳转至 个人博客页面 或者 扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长，阅读完整的文章：为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点？

往期文章归档
Vue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗 – cmdragon’s Blog为什么Vue 3需要ref函数？它的响应式原理与正确用法是什么？ – cmdragon’s BlogVue 3中reactive函数如何通过Proxy实现响应式？使用时要避开哪些误区？ – cmdragon’s BlogVue3响应式系统的底层原理与实践要点你真的懂吗？ – cmdragon’s BlogVue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越 – cmdragon’s Blog快速入门Vue模板引用：从收DOM“快递”到调子组件方法，你玩明白了吗？ – cmdragon’s Blog快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？ – cmdragon’s Blog快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？ – cmdragon’s Blog快速入门Vue3事件处理的挑战题：v-on、修饰符、自定义事件你能通关吗？ – cmdragon’s Blog快速入门Vue3的v-指令：数据和DOM的“翻译官”到底有多少本事？ – cmdragon’s Blog快速入门Vue3，插值、动态绑定和避坑技巧你都搞懂了吗？ – cmdragon’s Blog想让PostgreSQL快到飞起？先找健康密码还是先换引擎？ – cmdragon’s Blog想让PostgreSQL查询快到飞起？分区表、物化视图、并行查询这三招灵不灵？ – cmdragon’s Blog子查询总拖慢查询？把它变成连接就能解决？ – cmdragon’s BlogPostgreSQL全表扫描慢到崩溃？建索引+改查询+更统计信息三招能破？ – cmdragon’s Blog复杂查询总拖后腿？PostgreSQL多列索引+覆盖索引的神仙技巧你get没？ – cmdragon’s Blog只给表子集建索引？用函数结果建索引？PostgreSQL这俩操作凭啥能省空间又加速？ – cmdragon’s BlogB-tree索引像字典查词一样工作？那哪些数据库查询它能加速，哪些不能？ – cmdragon’s Blog想抓PostgreSQL里的慢SQL？pg_stat_statements基础黑匣子和pg_stat_monitor时间窗，谁能帮你更准揪出性能小偷？ – cmdragon’s BlogPostgreSQL的“时光机”MVCC和锁机制是怎么搞定高并发的？ – cmdragon’s BlogPostgreSQL性能暴涨的关键？内存IO并发参数居然要这么设置？ – cmdragon’s Blog大表查询慢到翻遍整个书架？PostgreSQL分区表教你怎么“分类”才高效PostgreSQL 查询慢？是不是忘了优化 GROUP BY、ORDER BY 和窗口函数？ – cmdragon’s BlogPostgreSQL里的子查询和CTE居然在性能上“掐架”？到底该站哪边？ – cmdragon’s BlogPostgreSQL选Join策略有啥小九九？Nested Loop/Merge/Hash谁是它的菜？ – cmdragon’s BlogPostgreSQL新手SQL总翻车？这7个性能陷阱你踩过没？ – cmdragon’s BlogPostgreSQL索引选B-Tree还是GiST？“瑞士军刀”和“多面手”的差别你居然还不知道？ – cmdragon’s Blog想知道数据库怎么给查询“算成本选路线”？EXPLAIN能帮你看明白？ – cmdragon’s BlogPostgreSQL处理SQL居然像做蛋糕？解析到执行的4步里藏着多少查询优化的小心机？ – cmdragon’s BlogPostgreSQL备份不是复制文件？物理vs逻辑咋选？误删还能精准恢复到1分钟前？ – cmdragon’s Blog转账不翻车、并发不干扰，PostgreSQL的ACID特性到底有啥魔法？ – cmdragon’s Blog银行转账不白扣钱、电商下单不超卖，PostgreSQL事务的诀窍是啥？ – cmdragon’s BlogPostgreSQL里的PL/pgSQL到底是啥？能让SQL从“说目标”变“讲步骤”？ – cmdragon’s BlogPostgreSQL视图不存数据？那它怎么简化查询还能递归生成序列和控制权限？ – cmdragon’s BlogPostgreSQL索引这么玩，才能让你的查询真的“飞”起来？ – cmdragon’s BlogPostgreSQL的表关系和约束，咋帮你搞定用户订单不混乱、学生选课不重复？ – cmdragon’s BlogPostgreSQL查询的筛子、排序、聚合、分组？你会用它们搞定数据吗？ – cmdragon’s BlogPostgreSQL数据类型怎么选才高效不踩坑？ – cmdragon’s Blog想解锁PostgreSQL查询从基础到进阶的核心知识点？你都get了吗？ – cmdragon’s BlogPostgreSQL DELETE居然有这些操作？返回数据、连表删你试过没？ – cmdragon’s BlogPostgreSQL UPDATE语句怎么玩？从改邮箱到批量更新的避坑技巧你都会吗？ – cmdragon’s BlogPostgreSQL插入数据还在逐条敲？批量、冲突处理、返回自增ID的技巧你会吗？ – cmdragon’s BlogPostgreSQL的“仓库-房间-货架”游戏，你能建出电商数据库和表吗？ – cmdragon’s BlogPostgreSQL 17安装总翻车？Windows/macOS/Linux避坑指南帮你搞定？ – cmdragon’s Blog能当关系型数据库还能玩对象特性，能拆复杂查询还能自动管库存，PostgreSQL凭什么这么香？ – cmdragon’s Blog给接口加新字段又不搞崩老客户端？FastAPI的多版本API靠哪三招实现？ – cmdragon’s Blog流量突增要搞崩FastAPI？熔断测试是怎么防系统雪崩的？ – cmdragon’s BlogFastAPI秒杀库存总变负数？Redis分布式锁能帮你守住底线吗 – cmdragon’s BlogFastAPI的CI流水线怎么自动测端点，还能让Allure报告美到犯规？ – cmdragon’s Blog如何用GitHub Actions为FastAPI项目打造自动化测试流水线？ – cmdragon’s Blog如何用Git Hook和CI流水线为FastAPI项目保驾护航？ – cmdragon’s BlogFastAPI如何用契约测试确保API的「菜单」与「菜品」一致？为什么TDD能让你的FastAPI开发飞起来？ – cmdragon’s Blog如何用FastAPI玩转多模块测试与异步任务，让代码不再“闹脾气”？ – cmdragon’s Blog如何在FastAPI中玩转“时光倒流”的数据库事务回滚测试？如何在FastAPI中优雅地模拟多模块集成测试？ – cmdragon’s Blog多环境配置切换机制能否让开发与生产无缝衔接？ – cmdragon’s Blog 免费好用的热门在线工具
RAID 计算器 – 应用商店 | By cmdragon在线PS – 应用商店 | By cmdragonMermaid 在线编辑器 – 应用商店 | By cmdragon数学求解计算器 – 应用商店 | By cmdragon智能提词器 – 应用商店 | By cmdragon魔法简历 – 应用商店 | By cmdragonImage Puzzle Tool – 图片拼图工具 | By cmdragon字幕下载工具 – 应用商店 | By cmdragon歌词生成工具 – 应用商店 | By cmdragon网盘资源聚合搜索 – 应用商店 | By cmdragonASCII字符画生成器 – 应用商店 | By cmdragonJSON Web Tokens 工具 – 应用商店 | By cmdragonBcrypt 密码工具 – 应用商店 | By cmdragonGIF 合成器 – 应用商店 | By cmdragonGIF 分解器 – 应用商店 | By cmdragon文本隐写术 – 应用商店 | By cmdragonCMDragon 在线工具 – 高级AI工具箱与开发者套件 | 免费好用的在线工具应用商店 – 发现1000+提升效率与开发的AI工具和实用程序 | 免费好用的在线工具CMDragon 更新日志 – 最新更新、功能与改进 | 免费好用的在线工具支持我们 – 成为赞助者 | 免费好用的在线工具AI文本生成图像 – 应用商店 | 免费好用的在线工具临时邮箱 – 应用商店 | 免费好用的在线工具二维码解析器 – 应用商店 | 免费好用的在线工具文本转思维导图 – 应用商店 | 免费好用的在线工具正则表达式可视化工具 – 应用商店 | 免费好用的在线工具文件隐写工具 – 应用商店 | 免费好用的在线工具IPTV 频道探索器 – 应用商店 | 免费好用的在线工具快传 – 应用商店 | 免费好用的在线工具随机抽奖工具 – 应用商店 | 免费好用的在线工具动漫场景查找器 – 应用商店 | 免费好用的在线工具时间工具箱 – 应用商店 | 免费好用的在线工具网速测试 – 应用商店 | 免费好用的在线工具AI 智能抠图工具 – 应用商店 | 免费好用的在线工具背景替换工具 – 应用商店 | 免费好用的在线工具艺术二维码生成器 – 应用商店 | 免费好用的在线工具Open Graph 元标签生成器 – 应用商店 | 免费好用的在线工具图像对比工具 – 应用商店 | 免费好用的在线工具图片压缩专业版 – 应用商店 | 免费好用的在线工具密码生成器 – 应用商店 | 免费好用的在线工具SVG优化器 – 应用商店 | 免费好用的在线工具调色板生成器 – 应用商店 | 免费好用的在线工具在线节拍器 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具CSS网格布局生成器 – 应用商店 | 免费好用的在线工具邮箱验证工具 – 应用商店 | 免费好用的在线工具书法练习字帖 – 应用商店 | 免费好用的在线工具金融计算器套件 – 应用商店 | 免费好用的在线工具中国亲戚关系计算器 – 应用商店 | 免费好用的在线工具Protocol Buffer 工具箱 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具图片无损放大 – 应用商店 | 免费好用的在线工具文本比较工具 – 应用商店 | 免费好用的在线工具IP批量查询工具 – 应用商店 | 免费好用的在线工具域名查询工具 – 应用商店 | 免费好用的在线工具DNS工具箱 – 应用商店 | 免费好用的在线工具网站图标生成器 – 应用商店 | 免费好用的在线工具XML Sitemap