在 Vue.js 中，有两个非常重要的属性：watch 和 computed (计算属性)。在开发过程中，了解它们的区别和用途可以让我们更好地使用 Vue.js。在本文中，我们将深入探讨 watch 和 computed 的区别。
Watch 属性
Watch 属性允许我们在 Vue 实例中监听某个属性的变化。当这个属性发生变化时，我们可以执行一些特定的操作。这使得我们能够在数据改变时更新视图或执行其他操作。
下面是一个简单的例子：
-- -------------------- ---- -------
--- --- - --- -----
--- -------
----- -
-------- ------- -----
--
------ -
-------- -------- ---------- --------- -
------------------- ------------------ --------------
-
-
--在这个例子中，我们可以看到我们定义了一个 message 属性，然后使用 watch 来监听它的变化。在监听函数中，我们打印出新值和旧值。
计算属性
计算属性和 watch 有一些相似之处，它们都可以侦听属性的变化并执行一些操作。但是，计算属性不同于 watch，它们是根据它们依赖的属性计算而来的。
下面是一个简单的例子：
-- -------------------- ---- -------
--- --- - --- -----
--- -------
----- -
-------- ------- -----
--
--------- -
---------------- -------- -- -
------ -----------------------------------------
-
-
--在这个例子中，我们定义了一个计算属性 reversedMessage，它基于 message 属性计算而来。我们通过 reverse() 和 join() 方法将 message 值反转，并将其设置为计算属性的值。
Watch 和计算属性的应用
那么，什么情况下应该使用 watch，什么时候应该使用计算属性呢？其实，这取决于你的需求。
如果你想监听嵌套属性的变化，或者想在某个属性发生变化时执行异步操作，那么你应该使用 watch。而如果你想要基于已有的属性计算出新的值并添加到 Vue 实例中，那么你应该使用计算属性。
总结
在本文中，我们深入探讨了 Vue.js 中的 watch 和计算属性，并比较了它们的不同之处。在实际开发中，学会运用这些属性可以让你更好地使用 Vue.js，提高开发效率。
代码示例:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- -- ----------------
------- ------------------------------------------------
-------
------
---- ---------
------ ----------------- ------------------ --------------
----
------ -- --------------- --
----
--------- -- ----------------------- --
------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ --------
--
------ -
-------- ------------------ --------- -
-------------------- - --------------------------------------
-
--
--------- -
------------------------ ---------- -
------ ------------------------------------------
-
-
---
---------
-------
-------源代码地址：Vue Watch vs Computed Example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9c28bf6b2d6eab312aa42