在 Vue.js 中，computed 和 watch 是两个常见的属性。它们都用于响应式地监听数据的变化，但它们的用法和功能有所不同。本文将详细讨论 computed 和 watch 的区别，希望可以帮助读者更好地理解和使用它们。
computed
computed 是一个属性，它允许我们定义一个函数，这个函数会根据其他已定义的属性的值动态计算出一个新的值。这个新的值可以用于渲染视图或者是支持其他的计算属性。 computed 的本质是一个缓存函数，只要依赖的属性没有发生变化，那么这个函数也不会被重新计算，这可以提高程序的性能，避免重复计算。
以下是一个 computed 的示例，它依赖了两个属性 firstName 和 lastName，它会根据这两个属性的值动态计算出一个完整的名字。
-- -------------------- ---- -------
----------
-----
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ----
--------- ---
-
--
--------- -
---------- -
------ -------------- - -- - -------------
-
-
-
---------在上面的示例中，我们定义了一个 computed 属性 fullName，它会根据 firstName 和 lastName 的值返回一个完整的名字。这个 computed 属性会在 firstName 或者 lastName 的值发生改变时被重新计算。
watch
watch 是一个属性，它允许我们监听一个数据的变化，并执行一些特定的操作。watch 最常见的用法是监听一个特定的属性，当这个属性的值发生变化时，执行一些响应式的操作，例如更新列表、获取数据、甚至是触发一个提示。
以下是一个 watch 的示例，它会监听 count 属性的变化，并打印出提示。
-- -------------------- ---- -------
----------
-----
------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
-
--
------ -
--------------- --------- -
------------------ -- ----------- --- -------------
-
--
-------- -
----------- -
------------
-
-
-
---------在上面的示例中，我们定义了一个 watch 属性 count，它会监听 count 的变化。当 count 的值发生变化时，watch 就会执行我们定义的回调函数，这个回调函数会打印出 count 值从之前的值变成了现在的值。
computed 和 watch 的区别
computed适用于计算单个值的场景，其本质是一个缓存函数，只有在依赖的属性变化后才会重新计算这个函数的值，从而避免重复计算，提高程序的性能。watch适用于监听多个属性的场景，它可以在一个属性变化时，执行多个响应式的操作，如更新列表、获取数据、触发提示等。computed表示一个计算属性，不能改变其值，主要用于视图渲染。watch表示监听到一个值的变化，可以执行一些响应式的操作。
总结
在 Vue.js 中，computed 和 watch 是用于响应式监听数据的常用属性，它们针对的场景和功能是不同的。需要根据具体的需求选择合适的属性来进行数据监听，以达到更加高效和优化的目的。
通过本文的介绍，读者应该会更深入地了解 computed 和 watch 的区别，进而在实际开发中更加灵活和高效地处理数据的变化。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cde310b5eee0b5255d5072