在 Vue.js 中，computed 计算属性是一个非常有用的特性。它可以让我们在模板中轻松地使用 JavaScript 函数来计算并渲染数据，极大地提升了 Vue.js 在数据处理方面的表现。
computed 计算属性的基本概念
computed 计算属性可以简单理解为一个带有缓存机制的可监听的属性。它会根据被依赖的数据值进行计算，并在依赖值改变时重新计算，并把计算结果缓存起来，只有在相关依赖值改变时才会重新计算。
computed 计算属性通常被用于对已有数据进行处理并返回新的数据，如将数据格式化、过滤、排序等操作。
computed 计算属性的使用
在 Vue.js 中，我们可以通过 computed 属性来定义 computed 计算属性。以下是一个示例：
-- -------------------- ---- -------
----------
-----
---------- ------- ------
------------ ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
-
--
--------- -
--------------- -
------ -------------- ------------------------ ----------- --
-
-
-
---------在上面的示例中，我们定义了一个数据 message，并通过计算属性 uniqueMessage 对这个数据进行了字符串去重的操作。在模板中，我们可以直接使用 uniqueMessage 属性来展示计算后的结果，而不是写一个 methods 方法再通过调用方法来渲染。
需要注意的是，在计算属性中不应修改其所依赖的数据。如果要对数据做修改，应该使用 watch 监听属性来进行操作。
计算属性的 getter 和 setter
computed 计算属性有一个非常有用的特性——setter。它让计算属性不仅能获取依赖值，还能向依赖值写入新的值，相当于一个计算属性兼具了数据属性和方法属性的特点。
以下是一个带有 setter 的计算属性的示例：
-- -------------------- ---- -------
----------
-----
---------- ------- ------
-------- ------------- ------
------ ----------------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
-
--
--------- -
-------------- -
----- -
------ -------------------
--
-------- -
------------ - -------------
-
-
-
-
---------在上面的示例中，我们定义了一个计算属性 messageLength，它不仅可以获取 message 的长度，还可以将新的长度赋值给 message。当我们在输入框中输入一个数字时，messageLength 会将输入的数字重复两遍赋值给 message。
计算属性的缓存机制
computed 计算属性的缓存机制是其最大的优点之一。从计算的角度来看，这意味着我们不需要每次重新计算数据。从表现的角度来看，这意味着我们可以轻松地优化 Vue.js 应用程序的性能。
下面是一个关于缓存机制的示例：
-- -------------------- ---- -------
----------
-----
--------- ----- ------
------- ------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
-
--
--------- -
------------- -
--------------- -------------
------ ---------- - -
--
------------- -
--------------- -------------
------ ---------- - -
-
--
-------- -
----- -
------------
-
-
-
---------在上面的示例中，我们定义了两个计算属性 doubleCount 和 tripleCount，分别是 count 的两倍和三倍。我们在控制台中打印了计算的内容，以便查看计算的触发。当我们每次点击增加按钮时，count 的值都会加 1，而 doubleCount 和 tripleCount 的值只会在 count 发生改变时才重新计算，不会出现没必要的计算。
computed 计算属性的缓存作用域
computed 计算属性的缓存机制并不完全是全局的。在大多数情况下，我们可以将计算属性的缓存作为组件实例的一个属性。这个属性只在组件的生命周期内有效，并在组件被销毁时被清除。
下面是一个关于缓存作用域的示例：
-- -------------------- ---- -------
----------
-----
---------- ------- ------
------------ -------------- ------
------------ -------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ --------
------ --
-
--
--------- -
---------------- -
-- --------------------------- -
------------------
------ -------------------------
-
-----------------
----- ------ - -------------- ------------------------ ----------- --
------------------------- - ------
------ ------
--
---------------- -
-- --------------------------- -
------------------
------ -------------------------
-
-----------------
----- ------ - -------------- ------------------------ ----------- --
------------------------- - ------
------ ------
-
-
-
---------在上面的示例中，我们定义了一个 cache 属性来缓存计算结果。我们将 uniqueMessage1 和 uniqueMessage2 分别缓存在 cache 中，可以看到两个计算属性的缓存是互相独立的。而且，使用 caches 也是一种优化方法，但是官方仍然推荐使用 computed 的缓存机制。
总结
在本文中，我们详细介绍了 computed 计算属性在 Vue.js 中的使用及其特性。希望通过本文的学习，大家可以更好地掌握计算属性的使用方法，在实际开发中更好地运用 Vue.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e695848841e9894aeb958