在Vue.js中，为什么要使用computed计算属性呢？答案很简单：可以帮助我们更好地组织代码，让代码更具可读性，以及优化数据渲染的性能。
什么是computed计算属性
computed是Vue.js中一个属性计算机制，可以根据已有的数据生成新的属性。
我们可以这样理解，computed其实就是一组记录属性计算方法的集合（称为getter函数），每当这些属性所依赖的数据发生改变时，computed就会自动执行相应的getter函数重新计算，并将计算结果缓存起来。当下次依赖已改变的计算属性时，返回缓存的计算结果，避免了无用的重复运算。
computed计算属性的优点
借助computed计算属性，可以使我们的代码更加的优雅，具体优点如下：
- 计算结果缓存的优化能力，也就是说，只有相关的属性改变时，getter才会重新计算，提高了效率。
- computed本质上是一个函数，相比依赖于原生属性的写法，代码逻辑更加清晰直观。
- 对于具有复杂逻辑的数据处理，使用computed计算属性可以将处理方法分离出来，使代码更具可读性。
因此，在Vue.js中，computed计算属性常常被用来作为数据处理、过滤、格式化等方面的工具。
computed计算属性示例
考虑以下例子，有一个列表组件，在模板中需要输出一个列表项的title和summary部分。
-- -------------------- ---- -------
----------
-----
----
--- ------------- ------ -- ----- -------------
------ ---------- -------
-- ---------------------- ------------ ------
-----
-----
------
-----------这里的问题在于，如果list中的数据量较大，那么每次渲染的时候会重新计算，而且这个计算是公式化的，对于大的数据来说，性能会非常低下。
因此我们需要使用computed计算属性来解决这个问题。
-- -------------------- ---- -------
----------
-----
----
--- ------------- ------ -- ------------- -------------
------ ---------- -------
-- ---------------------- ------------ ------
-----
-----
------
-----------
------- -----------------------
------ ------- -
---- -- -
------ -
----- --- -- ------
-
--
--------- -
------------ -- -
-- ---------------------
------ ------------------ -- -
------ -
------ -----------
-------- ------------ -- --
-
--
-
-
-
---------
通过上述代码，我们可以看到，每次渲染computeList的时候，computedList都生成一个新的数组。这个数组中只包含item的title和summary，而不会再显示对原始数据的逻辑处理。在这个例子中，computedList只在组件的list实例发生变化时重新计算，因此能更好地优化页面性能，同时也能使渲染更加快速。
computed计算属性使用要点
- computed计算属性尽可能的减少使用访问dom，将计算数据组织成数据集的方式来操作。
- 将常规方法（或指令）从computed计算属性中剥离，以增加代码的可读性和可维护性。
- 不要在computed的getter函数中直接更改数据。因为computed是基于其依赖的数据来计算更改，这将导致无限循环调用。如果涉及数据的更改，请使用methods方法来处理。
- 如果存在复杂的应用逻辑，需要将应用逻辑拆分为可重用的函数。
总结
在Vue.js中，computed计算属性是一种优秀的工具，可以将复杂的应用逻辑拆分为更加可读性和可维护的部分，同时也能减少dom访问次数，提升数据渲染性能。
因此，当我们在编写Vue.js应用时，建议优先使用computed计算属性，而不是在模板中做繁重的执行计算，以达到更优的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f982995b1f8cacd72235a