Vue.js 是一种轻量级的 JavaScript 框架，它可以帮助我们更轻松地构建大型 Web 应用程序。在 Vue.js 中，computed 属性可以帮助我们实现数据转换，让我们更加高效地管理数据，并且让组件更加简洁、易于维护。
什么是 computed 属性？
Vue.js 中的 computed 属性是一个可观察的对象，它可以通过计算从一个或多个依赖属性中生成新的属性。当依赖属性发生变化时，computed 属性会自动更新。
computed 属性与 methods 属性类似，但有一个重要的区别：computed 属性是基于依赖项进行缓存的，只有在依赖项发生变化时才会重新计算。这样可以避免不必要的计算，提高性能。
如何使用 computed 属性？
在 Vue.js 中，我们可以通过将 computed 对象添加到组件的选项中来定义 computed 属性。computed 对象中每个属性表示一个计算属性，并且我们可以将该属性设置为一个函数，该函数接受依赖项作为参数，并返回计算值：
-- -------------------- ---- -------
--- -----
-- ---
--------- -
-- -- ------------ -- ------ --
------- ---------- -
------ --------------------
--
-- -- ------------ - ----------- ------
----------------- ---------- -
--- ------ - ---------------------------------
-- --------- -
------ --------------
- ---- -
------ ----------------------------------- -
------ --------------------------------------- --- ---
---
-
-
--
-- ---
---在上面的示例中，我们定义了两个计算属性：length 和 filteredMessages。这里，length 属性基于 this.message 计算，返回 this.message.length，而 filteredMessages 属性则基于 this.message 和 this.search 计算，返回根据搜索条件过滤后的消息列表。
computed 属性的优点
使用 computed 属性有以下几个优点：
1. 简化模板
通过使用 computed 属性，我们可以在模板中引用计算属性的名字，而不是重复代码来计算它们的值。这样可以使模板更加简洁、易于阅读和维护。
例如，在上面的示例中，我们可以通过在模板中使用 length 属性来显示消息的长度，而不是重复代码来计算长度：
<p>The message has {{ length }} characters.</p>2. 减少重复计算
通过使用 computed 属性，我们可以避免在模板中多次计算相同的值。这样可以提高性能，并减少代码重复。
例如，在上面的示例中，我们可以通过在 computed 属性中定义 filteredMessages 属性来减少重复代码和计算：
<ul>
<li v-for="message in filteredMessages">{{ message.text }}</li>
</ul>3. 方便更新状态
使用 computed 属性可以方便地更新状态，因为 computed 属性会自动更新，我们不需要显式地更新它们。
例如，在上面的示例中，当搜索条件发生变化时，filteredMessages 属性会自动更新。这使得我们可以更轻松地管理状态，而无需手动更新它。
结论
在 Vue.js 中，computed 属性是一种非常有用的技术，它可以帮助我们更轻松地管理数据，使组件更加简洁、易于维护。通过使用 computed 属性，我们可以减少重复代码和计算，提高性能，并方便地更新状态。
如果您想深入了解 Vue.js 中 computed 属性的使用，建议您查看官方文档或尝试使用它们来实现自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670615d3d91dce0dc857ff28