简介
在 Vue.js 中，有两个非常重要的概念：watcher 和 computed。它们都是 Vue.js 中的响应式系统的一部分，用于在数据变化时自动更新视图。
虽然 watcher 和 computed 都可以观察数据的变化，但它们在实现上有很大的不同。本文将详细介绍它们之间的区别。
Watcher
Watcher 是 Vue.js 中一个非常重要的概念，它用于观察数据，当数据变化时执行一些操作。在 Vue.js 中，Watcher 通常是由系统自动生成的，用于将组件的模板与数据联系起来。
Watcher 中的主要方法是 update()，它会在数据变化后被调用。在 update() 中，可以执行一些操作来更新视图：
-- ------ ------- - ------- ----- ------- - --- ----------- ------- --------- -- --------- -------- -------- ------------------ --------- - -------------------- -
Computed
Computed 也是 Vue.js 中的一个概念，跟 Watcher 一样都是用来观察数据变化并执行一些操作。不过，Computed 不像 Watcher，它可以缓存结果，避免重复计算。
在上面的例子中，每次数据变化时，callback 都会被调用，这可能会导致性能问题。为了避免这种情况，我们可以使用 Computed。
Computed 的定义方式跟 Watcher 是很相似的。不同的是，我们需要使用 Vue.js 中的 computed 属性来定义它：
--- -----
-- ---
--------- -
-------- -- -
------ -------------- - - - - -------------
-
-
--在上面的例子中，当 firstName 或 lastName 改变时，fullName 会自动更新。如果这两个属性都没有改变，fullName 的值会直接从缓存中返回，从而避免重复计算。
Computed 的另一个优势是可以设置 setter。这意味着我们可以在计算属性中定义一个 setter，当我们改变属性的值时，setter 会被调用。
--- -----
-- ---
--------- -
--------- -
---- -------- -- -
------ -------------- - - - - -------------
--
---- -------- ---------- -
--- ----- - ---------------- --
-------------- - --------
------------- - ------------------ - --
-
-
-
--上面的例子中，我们定义了 fullName 的 getter 和 setter。当我们改变 fullName 的值时，setter 会被调用，从而自动更新 firstName 和 lastName 的值。
区别与结论
Watcher 和 Computed 在实现上有很大的不同。Watcher 主要用于观察数据变化，而 Computed 主要用于缓存计算结果，避免重复计算。
从实现角度来看，Watcher 是比 Computed 更加底层的东西，我们可以通过 Watcher 自己手动实现一些复杂的功能。而 Computed 只是一种简化代码的方式。
从使用角度来看，Watcher 通常用于执行一些比较耗时的操作，比如异步请求、计算某个值等。而 Computed 通常用于计算一个值，并且这个值会被多次使用。
在实际中，应该根据不同的情况选择不同的方案。有时候 Watcher 更适合，有时候 Computed 更适合。
总结：Watcher 适用于执行耗时操作，Computed 适用于缓存结果。
示例代码
使用 Watcher
--- -----
----- -
---------- -------
--------- ------
--------- --
--
------ -
---------- -------- ----- -
------------- - --- - - - - -------------
--
--------- -------- ----- -
------------- - -------------- - - - - ---
-
-
--使用 Computed
--- -----
----- -
---------- -------
--------- -----
--
--------- -
--------- -------- -- -
------ -------------- - - - - -------------
-
-
--来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a68a9948841e989432fd7e