在 Vue.js 中，computed 和 watch 都是用来监听数据的变化并根据变化做出响应的方法。但是，它们有不同的使用场景和内部机制。本文将详细介绍 Vue.js 中 computed 和 watch 的区别及使用场景。
computed
computed 属性通常用于计算和格式化数据，并在模板中展示结果。computed 在模板中看起来像一个普通的属性，但实际上它是一个函数。它会监听依赖的数据变化，只有当依赖的数据变化时，computed 才会重新计算值。一旦 computed 计算出了值，它将缓存该值，并在下次访问时返回缓存的值。
下面是使用 computed 的示例代码：
-- -------------------- ---- -------
----------
-----
----- ------- ------
----- ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
------ --
--
--
--------- -
--------------- -
-----------------------------
------ ---------- - --
--
--
-------- -
----- -
-------------
--
--
--
---------在上面的代码中，我们使用 computed 计算了 count 的两倍值，并在模板中使用 computedValue 展示计算结果。当我们点击按钮增加 count 的值时，computedValue 并没有立刻更新，而是等到下一次访问 computedValue 时才重新计算。
watch
watch 属性适用于在数据发生变化时执行异步或开销较大的操作。它允许你在数据变化时执行自定义函数。watch 依赖于监听的变量，并在这些变量发生变化时执行相应的操作。
下面是使用 watch 的示例代码：
-- -------------------- ---- -------
----------
-----
----- ------- ------
----- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
------ --
--
--
------ -
------------- ------- -
------------------ --------- ------- --------
--
--
-------- -
----- -
-------------
--
--
--
---------在上面的代码中，我们使用 watch 监听了 count 的变化，并在 count 发生变化时执行了自定义函数。当我们点击按钮增加 count 的值时，watch 会在 count 变化时打印出新旧值。
computed 和 watch 比较
通过上面的示例代码我们可以看到，computed 和 watch 都可以监听数据的变化并做出相应的响应。但是它们有着不同的使用场景和机制。
computed 和 watch 之间的区别可以归纳如下：
- computed 用于在模板中展示计算后的值，而 watch 侧重于响应式地处理副作用和异步操作。
- computed 是基于依赖缓存的。只有当计算的值发生变化时，才会重新计算；而 watch 是基于数据监听的，每当被监听的数据发生变化时，都会执行相应的操作。
使用场景
在实际开发中，我们可以根据需求选择 computed 或 watch。
当我们需要根据依赖进行一些相对简单的运算并在模板中展示结果时，可以使用 computed。
当我们需要处理一些副作用或异步操作时，可以使用 watch。
结语
本文详细介绍了 Vue 中 computed 和 watch 的区别及使用场景。希望本文能对前端开发者理解 Vue.js 中 computed 和 watch 的机制以及应用场景有所帮助。
如果你想练习本文中的示例代码，请在 Vue CLI 中创建一个新的项目，并在 App.vue 文件中复制粘贴相应的代码运行。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678324c7935627c9002b0275