引言
Vue.js 是一个流行的前端框架，它提供了多种方式来处理数据。其中，computed 和 watch 是两种常用的技术，它们都可以用于监视数据变化并作出响应。本文将详细介绍 computed 和 watch 的区别、应用场景和示例代码。
computed
computed 可以用来计算处理数据，类似于计算属性。其作用是将某些数据通过计算转化为其他数据，常常用于处理数据显示和计算。computed 的值会被缓存，只有依赖的数据发生变化时，才会重新计算。示例代码如下：
-- -------------------- ---- -------
----------
-----
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -------
--------- -----
-
--
--------- -
---------- -
------ -------------- - - - - -------------
-
-
-
---------上面的代码中，computed 计算并返回 fullName 的值，在模板中调用 fullName 就会显示 John Doe。
另外，需要注意的是，computed 的值并不会被直接修改。如果需要修改这个值，需要使用方法或者其他属性来更改依赖数据。示例代码如下：
-- -------------------- ---- -------
----------
-----
-------------------
------- -------------------------- -------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -------
--------- -----
-
--
--------- -
---------- -
------ -------------- - - - - -------------
-
--
-------- -
------------ -
-------------- - ------
-
-
-
---------上面的代码中，点击 Change Name 按钮后，firstName 的值将被更改为 Jane，从而导致 fullName 的值重新计算。
watch
watch 可以用来监视数据变化并做出响应。其作用是当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch 来监视数据的变化并执行相应的操作。watch 不缓存值，而是在数据发生变化时立即执行回调函数。示例代码如下：
-- -------------------- ---- -------
----------
-----
--------------------
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -------
--------- ------
--------- --
-
--
------ -
----------------- ------- -
------------- - ------ - - - - -------------
--
---------------- ------- -
------------- - -------------- - - - - ------
-
-
-
---------上面的代码中，watch 监视 firstName 和 lastName 的变化，当它们发生变化时，fullName 被更新成新的值。
需要注意的是，watch 可以监视对象或嵌套对象的属性。示例代码如下：
-- -------------------- ---- -------
----------
-----
--------------------
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -
----- -------
---- --
-
-
--
------ -
------------------ ------- -
---------------- ------- ---- - - ------ - - -- - - -------
-
-
-
---------上面的代码中，watch 监视 user 对象的 age 属性的变化。当 age 变化时，会在控制台输出信息。
computed 和 watch 的区别
computed 和 watch 都可以用来监视数据变化并作出响应，但它们之间存在以下区别：
computed适用于计算和处理数据，并且返回值需要有缓存；watch适用于监视某个特定的数据，并且需要进行异步或开销较大的操作。
应用场景
computed适用于计算和处理数据，返回值需要有缓存；watch适用于需要异步操作的情况，例如请求数据，并根据数据更新页面。
结论
computed 和 watch 都是处理数据的常用方法。computed 适用于计算和处理数据，返回值需要有缓存；watch 适用于监听某个特定的数据，需要进行异步或开销较大的操作。
如果您需要对数据进行复杂的计算、转换或筛选，或者您需要基于某种数据进行联动，则应使用 computed。如果您需要响应某些数据的变化，以在数据变化时执行一些异步或耗时操作，则应使用 watch。
但是，在实际开发中，应该深入思考需要使用 computed 还是watch。对于一些计算量较小、对性能要求较高的情况，可以选择 computed；对于需要进行异步操作或者需要的开销较大的情况，可以选择 watch。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67056ff2d91dce0dc85356ba