在 Vue.js 中，计算属性是一种可以动态计算返回值的属性。它们是基于响应式依赖进行缓存的，只有在相关依赖发生改变时才会重新计算值。计算属性常用于处理复杂的数据逻辑，以及在模板中进行数据的展示。
基本语法
计算属性的基本语法如下：
computed: {
propertyName: function() {
// 计算并返回属性值
}
}其中，propertyName 是计算属性的名称，可以在模板中使用。在 propertyName 对应的函数中，我们可以通过访问其他数据属性或者方法来计算并返回属性值。
计算属性的优点
相比直接在模板中进行数据计算，计算属性具有以下优点：
可读性更好：通过计算属性，我们可以将复杂的数据逻辑抽象出来，使得模板更加简洁，易于阅读和维护。
缓存机制：计算属性是基于响应式依赖进行缓存的，只有在相关依赖发生改变时才会重新计算值。这样可以避免不必要的计算，提高性能。
计算属性的使用示例
下面通过一个实际的例子来演示计算属性的使用。假设我们有一个数据列表，其中每个数据项包含 name 和 price 两个属性。我们需要计算出所有数据项的总价格，并将其展示在模板中。
1. 直接在模板中计算总价格
首先，我们可以在模板中使用 v-for 指令遍历数据列表，并在模板中计算总价格，代码如下：
<ul>
<li v-for="item in items">
{{ item.name }}：{{ item.price }}
</li>
<li>总价格：{{ getTotalPrice() }}</li>
</ul>在上面代码中，getTotalPrice() 是一个方法，用于计算总价格。该方法需要遍历数据列表，并累加每个数据项的 price 属性。
-- -------------------- ---- -------
-------- -
-------------- ---------- -
--- ---------- - --
--- ---- - - -- - - ------------------ ---- -
---------- -- --------------------
-
------ -----------
-
-虽然这种方式可以实现我们的需求，但是它存在以下问题：
每次重新渲染模板时，都会调用一次
getTotalPrice()方法。如果数据列表很大，计算总价格的时间会很长，影响性能。在模板中直接计算总价格，会使得模板变得复杂，难以维护和调试。
2. 使用计算属性计算总价格
为了解决上面的问题，我们可以使用计算属性来计算总价格。代码如下：
<ul>
<li v-for="item in items">
{{ item.name }}：{{ item.price }}
</li>
<li>总价格：{{ totalPrice }}</li>
</ul>-- -------------------- ---- -------
--------- -
----------- ---------- -
--- ---------- - --
--- ---- - - -- - - ------------------ ---- -
---------- -- --------------------
-
------ -----------
-
-通过上面的代码，我们定义了一个名为 totalPrice 的计算属性，它的值是通过遍历数据列表计算得出的。当数据列表发生变化时，totalPrice 会重新计算，而不是每次重新渲染模板时都计算一次。这样可以避免不必要的计算，提高性能。
计算属性的高级用法
除了基本用法之外，计算属性还有一些高级用法，可以进一步提高我们的开发效率和代码质量。
1. 计算属性的 setter
计算属性不仅可以计算属性值，还可以定义属性的 setter 方法。这样，我们就可以在计算属性的值发生变化时，执行一些操作。代码如下：
-- -------------------- ---- -------
--------- -
--------- -
---- ---------- -
------ -------------- - - - - --------------
--
---- ------------------ -
--- ----- - ---------------- ---
-------------- - ---------
------------- - ------------------ - ---
-
-
-在上面的代码中，我们定义了一个名为 fullName 的计算属性，它的值是由 firstName 和 lastName 两个属性计算得出的。同时，我们还定义了 fullName 的 setter 方法，用于在用户修改 fullName 的值时，更新 firstName 和 lastName 的值。
2. 计算属性的缓存
在计算属性中，如果我们访问的是某个响应式依赖，那么计算属性会自动缓存起来，直到该依赖发生变化时，才会重新计算属性值。代码如下：
computed: {
reversedMessage: function() {
console.log('computed');
return this.message.split('').reverse().join('');
}
}在上面的代码中，我们定义了一个名为 reversedMessage 的计算属性，它的值是通过将 message 属性的值反转后得到的。如果我们在模板中使用该计算属性，如下所示：
<div>{{ reversedMessage }}</div>那么在首次渲染模板时，会打印一次 computed，表示计算属性被计算了一次。但是，如果我们再次渲染模板时，不会再次打印 computed，因为计算属性已经被缓存起来了。
3. 计算属性的依赖
在计算属性中，如果我们访问的是某个非响应式依赖，那么计算属性不会自动缓存起来。代码如下：
computed: {
now: function() {
console.log('computed');
return Date.now();
}
}在上面的代码中，我们定义了一个名为 now 的计算属性，它的值是当前时间的时间戳。由于时间戳是一个非响应式依赖，所以每次渲染模板时，都会重新计算 now 属性的值，而不会缓存起来。
总结
计算属性是 Vue.js 中非常重要的特性之一，它具有缓存机制、可读性好等优点，可以帮助我们处理复杂的数据逻辑，提高代码质量和开发效率。在实际开发中，我们需要充分利用计算属性的特性，以及其高级用法，来优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d76bfd3423812e4b7e306