在 Vue.js 中，computed 和 watch 是两个常用的属性，用于响应式地处理数据。显然它们的作用是不同的，但往往会被新手混淆或误用。本文将详细介绍它们的区别及应用。
computed
computed 是一个属性，它用于声明一个计算属性。计算属性是根据其他数据属性值计算而来的，通常是简单的加、减、乘、除等数学运算，也可以是更复杂的函数调用和条件逻辑。
computed 的使用方式如下：
-- -------------------- ---- -------
--------
------ ------- -
------ -
------ -
------ ----
------- ---
-
--
--------- -
------ -
------ ---------- - -----------
-
-
-
---------这段组件代码中声明了一个计算属性 area，通过返回 this.width * this.height 的结果来计算得到。此时如果调用 area，将得到 20000 的返回值。而当 width 或 height 的值发生变化时，Vue.js 会智能地重新计算 area 的值并更新组件。因此可以在模板中直接使用 area 作为响应式的数据源：
<template>
<div>
<p>宽度：{{ width }}</p>
<p>高度：{{ height }}</p>
<p>面积：{{ area }}</p>
</div>
</template>计算属性具有缓存特性。当一个计算属性被多次引用时，第一次计算后的结果会被缓存起来，以后的引用直接返回缓存结果，而不必重新计算。这样可以节省性能开销，并且让代码更简洁易懂。
computed 对于单纯的数据计算、数据格式化、数据过滤等场景非常适用，它可以让代码更加简洁、优雅。
watch
watch 是 Vue.js 提供的一个属性，用于监听某个数据的变化。当数据变化时，watch 可以执行用户定义的操作，比如发送网络请求、更新本地存储、操作 DOM 等。
watch 的使用方式如下：
-- -------------------- ---- -------
--------
------ ------- -
------ -
------ -
-------- --
-
--
------ -
--------------- ------- -
-------------------- - --------- --- -----------
-
-
-
---------这段组件代码中声明了一个 watch，用于监听 message 的变化。当 message 的值发生变化时，就会执行一个函数，打印出 message 的新旧值。这个 watch 比较简单，实际应用中可以进行更复杂的操作。
需要注意的是，watch 不仅可以监听数据的变化，还可以监听对象、数组等复杂数据类型的变化，并进行深度观察。监听数组变化时可以使用 deep 选项：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ --
-
--
------ -
------ -
--------------- ------- -
------------------ --------- ------- -------
--
----- ----
-
-
-这里会监听 items 数组的变化，当数组中的某个元素发生变化、被添加或删除时均会触发 watch，执行相应的操作。
总的来说，watch 适用于监听数据的变化，从而执行相应操作的场景。但是需要注意的是，watch 中的函数可能会被执行多次，因此需要确保函数的执行不会产生副作用或造成性能上的负担。
computed vs watch
理解 computed 和 watch 的区别非常重要，因为它们的应用场景是不同的。
- computed 适用于单纯的数据计算、格式化、过滤等场景，它可以使代码更加简洁、易懂，也可以提升性能。使用 computed 计算的属性是基于其它响应式属性的值，并且会进行缓存。计算属性只有在必要的情况下（当它所依赖的响应式属性改变时）才会重新计算。
- watch 适用于需要在数据变化时执行副作用操作的场景，比如发送请求、操作 DOM 等。watch 还可以监听对象、数组等复杂数据类型的变化，并进行深度观察。
当我们需要对某个数据进行数据转换、数据处理等操作时，使用 computed 更加方便，而当我们需要对数据进行特定操作时，使用 watch 更为合适。
示例
下面是一个示例，展示了 computed 和 watch 的应用：
-- -------------------- ---- -------
----------
-----
-------- ----- ------
-------- ------ ------
-------- ---- ------
---------- ----- ------
------- --------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ----
------- ----
------ -
-
--
--------- -
------ -
------ ---------- - -----------
-
--
------ -
------- -
------------
--
-------- -
------------
-
--
-------- -
------- -
---------- - ---
----------- - ---
-
-
-
---------这是一个简单的矩形面积计算组件。它声明了 width、height、area 和 count 四个数据属性，其中 area 是基于 width 和 height 两个计算属性计算而来的，count 是一个整型变量，用于记录 width 或 height 被改变的次数。组件还声明了一个 reset 方法，用于重置 width 和 height 的值。
组件中，计算属性 area 会随着 width 和 height 的变化而发生变化，而 count 属性则会在 watch 中重新计数。这两种不同的方式展示了 computed 和 watch 的不同之处。
总结
computed 和 watch 是 Vue.js 中两个常用的响应式数据处理方式，它们的作用是不同的，应用场景也不同。computed 适用于单纯的数据计算、格式化、过滤等场景，而 watch 适用于监听数据的变化，从而执行相应操作的场景。在实际使用中需要根据不同的场景选择合适的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4e78448841e9894152e03