Vue.js 是一款非常流行且易于使用的前端框架。computed 和 watch 是 Vue.js 中两个非常重要的计算属性和观察属性。本文将详细介绍 computed 和 watch 的用法和区别，并提供示例代码。
computed
computed 是一种计算属性，用于在模板中对变量进行动态绑定，从而实现数据的计算和处理。computed 计算属性可以依赖于其它属性的值，并且在计算后会被缓存，只有当其依赖的值发生变化时才会重新计算。
用法
下面是 computed 的基本用法。
----------
-----
----- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -------
--------- ------
--
--
--------- -
---------- -
------ -------------- - - - - --------------
--
--
--
---------在这个示例中，我们定义了两个属性 firstName 和 lastName，然后定义了一个 fullName 计算属性，该计算属性依赖于 firstName 和 lastName 的值，并返回它们的拼接字符串。
在模板中，我们调用 fullName 计算属性，并将其显示出来。如果 firstName 或 lastName 的值发生变化，fullName 计算属性会自动重新计算。
深入理解 computed
除了基本用法外，computed 还有很多其他的用法和用途。下面是一些我们需要深入理解 computed 的原因：
计算属性 vs 方法
从外观上看，computed 和方法看起来非常相似。因为它们都可以计算并返回一个值，而且都可以接受参数。但是，它们之间有一个重要的区别，就是计算属性是基于它们的依赖缓存的。也就是说，只要 firstName 或 lastName 的值没有改变，那么 fullName 就不会重新计算。而方法则没有缓存和优化这个过程，每次都是重新调用方法。
这意味着什么呢？实际上，计算属性比方法更加高效，因为它们可以避免不必要的计算。但是，如果你确实需要每次调用时都重新计算值，那么应该使用方法，而不是计算属性。
计算属性 vs 监听属性
computed 和 watch 是 Vue.js 中两个非常重要的属性，它们都可以监视数据的变化。然而，它们之间也有很大的区别。
watch 是一个观察属性，用于观察特定属性的变化，并在特定条件下执行回调函数。与 computed 不同，watch 不会缓存值，并且需要手动指定回调函数。
----------
-----
------ ----------------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
------ -
--------------- ------- -
---------------- -------- ---------- --- -------- ------------
--
--
--
---------在这个示例中，我们定义了一个监听留言 message 的 watch 属性。每当 message 属性的值发生变化时，会执行相应的回调函数，并输出新值和旧值。
尽管 computed 和 watch 都可以计算新值，但它们之间还有很多不同之处。下面是它们之间的一些不同之处：
- computed 是基于它们的依赖缓存的，而 watch 不会缓存值。
- computed 用于计算新值，而 watch 用于执行一些特定的操作，比如 Ajax 请求、限制触发次数 等。
- computed 不支持异步操作，而 watch 支持。
- computed 是同步的，而 watch 是异步的。
- computed 只在其依赖的值发生变化时才会重新计算，而 watch 可以在不同的情况下执行不同的操作。
因此，当需要处理异步操作或执行一些特定的操作时，应该使用 watch，而不是 computed。
watch
watch 是一个观察属性，用于观察特定属性的变化，并在特定条件下执行回调函数。与 computed 不同，watch 不会缓存值，并且需要手动指定回调函数。
用法
下面是 watch 的基本用法。
----------
-----
------ ----------------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
------ -
--------------- ------- -
---------------- -------- ---------- --- -------- ------------
--
--
--
---------在这个示例中，我们定义了一个监听留言 message 的 watch 属性。每当 message 属性的值发生变化时，会执行相应的回调函数，并输出新值和旧值。
深入理解 watch
watch 的用法有很多细节，下面是一些必要的几点：
监听特定属性
watch 可以用于监听特定属性的变化。比如：
--------
------ ------- -
------ -
------ -
-------- ---
--
--
------ -
---------- -
--------------- ------- -
---------------- -------- ---------- --- -------- ------------
--
---------- -----
--
--
--
---------在这个示例中，我们使用 watch 监听了 message 属性的变化，并指定了回调函数。当 message 属性的值发生变化时，会执行相应的回调函数，并输出新值和旧值。
我们还使用了immediate: true选项，指定在初始化组件时立即调用回调函数，而不需要先发生属性变化。
监听多个属性
watch 还可以监听多个属性的变化，并在满足特定条件时执行相应的回调函数。比如：
--------
------ ------- -
------ -
------ -
---------- ---
--------- ---
--------- ---
--
--
------ -
----------------- ------- -
------------- - ---------- ------------------
--
---------------- ------- -
------------- - ------------------ -----------
--
--
--
---------在这个示例中，我们定义了三个属性：firstName、lastName 和 fullName，其中 fullName 为计算属性。我们使用 watch 监听了 firstName 和 lastName 属性的变化，并在满足相应条件时更新 fullName 计算属性的值。
监听对象属性
在 Vue.js 中，我们可以使用对象或数组存储数据。如果需要监听对象属性的变化，可以使用前缀 obj. 表示该对象属性。比如：
--------
------ ------- -
------ -
------ -
---- -
----- ---
---- ---
--
--
--
------ -
----------- -
--------------- ------- -
---------------- ----- ---------- --- ----- ------------
--
---------- -----
--
---------- -
--------------- ------- -
---------------- ---- ---------- --- ---- ------------
--
--
--
--
---------在这个示例中，我们使用了前缀 obj. 来监听对象属性的变化，并指定相应的回调函数。当 obj.name 属性或 obj.age 属性的值发生变化时，会执行相应的回调函数，并输出新值和旧值。
computed 和 watch 的差异分析
通过上述内容的讲解，我们了解了 computed 和 watch 的用法和特点。下面对两者进行简单的对比：
第一，computed 的类型是计算属性，它在监测到变化时会自动缓存起来，需要的时候会直接调用缓存，使得其计算量和运行时间很少。
第二，watch 是侦听属性，它用于侦听是否有值变化，并且有一个选项是 deep，它可以深度遍历监听对象的每一个属性。
第三，computed 不支持异步操作，而 watch 支持。
第四，computed 在组件中使用时可以直接调用，不需要加括号。但使用 watch 需要手动注册它，然后带上要监听的值和回调函数。
在我们的项目开发中，应该根据实际情况选择使用 computed 还是 watch。如果需要计算值、缓存值或者监听到一个特定的值，那么就使用计算属性 computed。相反，如果需要操作异步数据、监听非常复杂的变化、在数据变化时执行异步操作，那么就使用 watch。
总结
总的来说，computed 和 watch 都是 Vue.js 中非常重要的属性，它们都用于计算、处理和监听数据的变化。其中，computed 是一种计算属性，用于计算和缓存数据的值；而 watch 是一种观察属性，用于观察数据的变化并执行特定的操作。
基本上，computed 是用来读取数据，而 watch 是用来监听数据的变化。它们之间的区别在于，computed 缓存了计算结果，只有当依赖项发生变化时才会重新计算；而 watch 在每次变化时都会执行回调函数，在特定条件下执行特定的操作。
当你需要监听对象属性的变化时，你需要使用 watch；当你需要处理异步操作时，你也需要使用 watch。而当你需要缓存值或者计算值时，你应该使用 computed。在实际项目中，需要根据实际情况选择合适的属性，并结合模板使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66475fb5d3423812e45ad5c9