引言
Vue.js 是一个流行的前端框架，它提供了很多工具让我们轻松地构建交互式的 Web 应用程序。Vue.js 中经常使用 watch 和 computed 来实现数据的双向绑定。虽然它们看似很相似，但是它们有很大的区别。在本文中，我们将深入探讨这两个概念的区别和用法。
computed
computed 是 Vue.js 中的一个计算属性，它可以根据已有的数据进行计算，并返回一个新的数据。它实际上是依赖于数据的 getter 函数，计算属性的值会根据依赖的数据自动更新。
computed 通常在模板中使用，它会根据依赖的数据的变化而自动更新结果，并且会进行缓存，只会在需要的时候才会重新计算。这个特性使得 computed 适用于计算耗时的操作，如从后端获取数据、数据格式化等操作。
以下是一个使用 computed 的示例代码：
----------
-----
--------------------
------ ------------- -------------------
-------- ---------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--------- --
--
--
--------- -
------------ -
------ ---------- - --------------
--
--
--
---------在这个示例中，我们定义了一个计算属性 totalPrice，用于计算商品的总价，它依赖于 price 和 quantity 这两个数据。每当 price 或 quantity 发生变化时，totalPrice 会自动更新。
watch
watch 是 Vue.js 中用于监听数据变化的一个API。当指定的数据发生变化时，watch 会执行指定的回调函数。watch 监听的数据可以是 data 中的数据或者 computed 中的计算属性。
watch 提供了一种响应式的方法来观察和响应 Vue 实例上的数据变动。它比 computed 更加灵活，可以在数据改变时执行异步操作、复杂的逻辑、甚至是操作 DOM 元素等。
以下是一个使用 watch 的示例代码：
----------
-----
-------------------
------ ----------- -------------------
-------- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
--
--
------ -
---------------- -
------------- - ----------------
--
--
--
---------在这个示例中，我们使用 watch 监听了 username 数据的变化，当 username 发生变化时，watch 中的回调函数会被调用，并将新的值传递给它。在这个例子中，回调函数会重新计算 greeting，并将计算结果更新到模板中。
watch vs. computed
虽然 watch 和 computed 看起来很相似，但是它们有很大的区别。下面是一些它们之间的区别和对比：
- computed 是计算属性，它的值会被缓存，只在相关的依赖发生改变时才会重新计算。而 watch 是一个监听器，每次监听的数据发生变化时都会执行回调函数。
- computed 一般用于计算“衍生”的数据，比如从原始数据中提取出某些信息或者对原始数据进行格式化处理。而 watch 一般用于执行“耗时”的或者复杂的操作，比如执行异步操作或者服务器 API 调用，或者操作 DOM 元素等。
- computed 只有 getter 函数，没有 setter 函数，它是只读的。而 watch 可以执行任何代码，并且提供了新值和旧值两个参数，可以在代码中进行特殊处理。
结论
在 Vue.js 中，computed 和 watch 是实现数据双向绑定的重要工具。虽然它们看起来很相似，但它们有很大的区别。computed 适用于计算“衍生”的数据，并且它具有自动缓存的特性，而 watch 适用于执行“耗时”的或者复杂的操作，并且它提供了灵活的参数。针对不同的场景需要选择合适的工具来实现双向绑定。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722201a2e7021665e0a6a4b