在 Vue.js 中，computed 属性通常被用来监听响应式数据的变化，以便在数据变化时更新视图。然而，computed 属性可以更进一步，使用它来监听对象属性的变化，以达到更加精细的控制和更新视图的效果。
为什么需要监听对象属性的变化？
在 Vue.js 中，我们通常会将对象作为组件 data 中的响应式数据，让它们自动侦听属性变化并更新视图。但是，在一些特殊情况下，我们可能需要更加细致的控制来达到更好的效果。
比如，我们有一个对象，它包含了多个属性，我们想要在其中一个属性发生变化时，重新计算其它属性的值并更新视图。在这种情况下，我们就需要监听一个或多个对象属性的变化，并在变化时进行计算和更新。
如何使用 computed 监听对象属性的变化？
使用 computed 监听对象属性的变化，需要借助 Vue.js 提供的 $watch 方法，它可以用来监听任何响应式数据的变化，包括对象属性。
在 computed 中定义一个 getter 函数，并在函数体内调用 $watch 方法，监听对象属性的变化。当属性变化时，$watch 回调函数会被触发，我们可以在回调函数中进行计算和更新。
-- -------------------- ---- -------
-
------ -
------ -
---- -
------ --
------ --
------ -
-
-
--
--------- -
-------------- -
----- --- - --------
-- -- --------- - --------- ---
-------------- -- --------- - ---------- -------- -- -
-- ---------
--------- - -------- - -
--
-- ------
------ ---------
-
-
-实现和效果示例
下面我们通过一个实例来演示如何使用 computed 监听对象属性的变化并更新视图。
假设我们有一个数据源 sourceData，它是一个包含名称、原价、折扣以及实际价格的对象数组。我们要在视图中展示它们，同时计算出总原价、总折扣和总实际价格，并实时更新。
-- -------------------- ---- -------
----- -- - --- -----
--- -------
----- -
----------- -
- ----- -------- --- ------ ---- --------- --- --
- ----- -------- --- ------ ---- --------- --- --
- ----- -------- --- ------ ---- --------- --- -
-
--
--------- -
------------ -
-- -----
------ ------------------------------ ----- -- ----- - ----------- --
--
--------------- -
-- -----
------ ------------------------------ ----- -- ----- - -- - -------------- - ----------- --
--
------------------ -
----- ---------- - ---------------
-- -- ---------- ------ ----- - -------- ----
----------------------- -- -
-------------- -- ---------- - -------------- -------- -- -
---------------- - -------- - -------------
--
--
-- -------
------ ------------------------- ----- -- ----- - ----------------- --
-
-
--上面的代码中，我们定义了三个 computed 属性：totalPrice 计算总原价，totalDiscount 计算总折扣，totalActualPrice 计算总实际价格。其中，totalActualPrice 定义的 getter 函数中使用 forEach 方法遍历 sourceData 数组里的每个对象，然后在每个对象上调用 $watch 方法，监听 price 和 discount 两个属性的变化，当它们变化时，计算实际价格 actualPrice 并重新赋值。
在 HTML 中展示和使用这三个 computed 属性：
-- -------------------- ---- -------
---- ---------
-------
-------
----
-------------
--------------
-----------------
---------- ----------
-----
--------
-------
--- ----------- -- ------------
------ --------- -------
------ ---------- -------
------ ------------- -------
------ ---------------- -------
-----
--------
--------
---------- ------ -- ---------- --------
---------- --------- -- ------------- --------
---------- ------ ------ -- ---------------- --------
------效果图如下：
总结
使用 computed 属性监听对象属性的变化，可以灵活地控制响应式数据并实时更新视图。在使用 compute 属性监听对象属性变化时，需要关注对象属性变化的利弊和性能问题，避免过度监听和计算，影响程序的性能表现。
希望本文能够帮助你更好地理解并掌握 Vue.js 中的 computed 属性，以及更深入地学习响应式编程和数据驱动开发的相关知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c905a25ad90b6d04156d19