在前端开发中，页面数据的动态更新是非常重要的技术特点，Vue.js框架中的computed计算属性可以帮助我们实现非常方便的数据计算与展示。
什么是computed
computed是Vue.js的一个计算属性，可以帮助我们实现对数据的动态计算和缓存。
computed是一个函数，它的返回值可以作为响应式数据被引用。
computed其实是一个“虚拟属性”，其内部实现是依赖于所依赖数据的变化来动态更新的。
当依赖数据变化时，computed数据才会被重新计算，否则其返回值会从缓存中读取，以此减少不必要的计算。
使用computed
下面通过一个简单的案例来说明computed的使用方法：
-- -------------------- ---- -------
----------
-----
-------- ---------- ------
----
--- ------------- ------ -- ----- ---------------
-- --------- ----- ---------- ------------- ------------- -------------------- --
-----
-----
------
-----------
--------
------ ------- -
------ -
------ -
----- -
- --- -- ----- ------ ------ --- ------ - --
- --- -- ----- ------ ------ --- ------ - --
- --- -- ----- ------ ------ --- ------ - --
--
--
--
--------- -
------------ -
--- --- - --
--- ---- - - -- - - ----------------- ---- -
--- -- ------------------ - -------------------
-
------ ----
--
--
--
---------在上面的代码中，computed计算属性totalPrice计算了购物车cart中所有商品的总价，并在页面上展示。
当购物车中商品数量或价格发生变化时，totalPrice会随之变化。
computed可以帮助我们实现简单的数据计算，更关键的是，computed可以将计算后的结果缓存起来，减少重复计算，提高性能。
计算属性的get和set方法
computed属性本身只有getter方法，但我们也可以在属性中为数据设置setter方法，以起到引用computed属性的一定控制作用。
-- -------------------- ---- -------
----------
-----
---------- -------- ------
------ ----------- ------------------ --
------
-----------
--------
------ ------- -
------ -
------ -
---------- ---
--------- ---
--
--
--------- -
--------- -
----- -
------ -------------- - - - - --------------
--
-------- -
----- --- - ----------- ---
-------------- - -------
------------- - -------
--
--
--
--
---------在上面的代码中，我们为computed的username属性设置了set方法，在输入框中输入完整姓名后，computed将自动更新firstName和lastName属性的值。
通过这种方法，我们可以方便地实现用户信息的动态更新。
总结
通过computed计算属性，我们可以方便地实现数据的计算，并让计算结果动态更新到页面上。
computed还可以带来性能优化，其实现原理可以让计算结果进行缓存，减少重复计算。
如果你想在Vue.js中更方便地实现页面计算与展示，computed计算属性是一个必不可少的技术特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c717fb10032fedd3907736