Vue3计算属性如何使用详解？

本文共计1865个文字，预计阅读时间需要8分钟。

目录 + computed 计算属性说明 + computed 属性使用 + 总结 + 注意 + 上一篇博文说了 Vue3 的 toRefs 函数和 toRef 函数，今天我们就总结一下 Vue3 的计算属性，实际上学过 Vue2 的宝子们应该都清楚，今天我们就来梳理一下。

目录

• computed 计算属性说明
• 计算属性使用
• 总结
• 注意

上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数，今天就稍微总结一下 vue3 的计算属性，其实学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高，所以说咱今天稍微总结一下 vue3 项目中的计算属性，下面开始。

computed 计算属性说明

computed 表示计算属性，通常的作用是用来进行数据处理，方便在末班中简化书写。

比如日常在模板中我们渲染数据的时候一般是使用{{ }}来进行展示数据，但是有的时候嘞，获取到的数据并不是我们想要的类型，我们可以在{{ }}中编写表达式转换成我们需要的类型，但是呢，这样做简单的还可以，如果相对复杂的格式在{{ }}中编写的话就会造成模板代码繁琐，不易维护和阅读，所以这并不是最好的编码习惯，因此，vue3 也为我们提供了一些好的解决方案，计算属性就是其中一种。

计算属性可以帮我们将数据转换成需要展示的数据格式，不必在模板中编写大量的表达式进行处理。