Vue.js 是一款流行的 JavaScript 框架，它使用声明式的模板语法来构建用户界面。在 Vue.js 中，我们可以使用 computed 和 watch 来侦听数据的变化，并根据变化来更新视图。虽然这两个功能都可以用于相似的目的，但它们实际上是不同的。
Computed
computed 是一个计算属性，它的值是根据其他属性计算得到的。computed 的魅力在于它会缓存计算结果，只有当依赖的属性改变时才会重新计算。这样可以避免重复计算和减少不必要的运算，提高应用程序的性能。
下面是一个使用 computed 的示例：
----------
-----
---------- ------------ ------
---------- -------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
----- ------- ----
------ ----
--
--
--
--------- -
---------------- -
------ ----------------------- - ------------------
--
--
--
---------在这个示例中，我们定义了一个 product 对象，它包含一个 name 和一个 price 属性。我们还定义了一个 computed 属性 named formattedPrice，它将以美元的形式格式化价格。
Watch
watch 是一个侦听器，它会在对象的属性发生变化时执行回调函数。watch 可以用于处理异步操作和复杂的业务逻辑，例如向后端发送 API 请求或操作 DOM 元素。
下面是一个使用 watch 的示例：
----------
-----
------ ---------------- --
----
--- ----------- -- -------------- ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
------- ---
------ -
- --- -- ----- ------- --- --
- --- -- ----- -------- ------ ---- --
- --- -- ----- ------- ----- -- --
--
--
--
--------- -
--------------- -
-- -------------- -
------ -----------
-
------ ---------------------- -- -------------------------------------------------------------
--
--
------ -
-------- -
------------------- ----- -----------
--
--
--
---------在这个示例中，我们定义了一个搜索框和一个列表，列表中包含三个商品。我们在 data 中定义了一个 search 属性和一个 items 数组。我们还定义了一个 computed 属性 named filteredItems，它基于搜索词过来商品列表。
我们还定义了一个 watch 属性，它侦听 search 的变化，并在 search 属性发生变化时打印一条消息到控制台。
区别
计算属性和侦听属性的作用不同
computed 属性计算得到一个值，使得我们可以简化模板中的表达式。我们可以省略繁琐的计算逻辑，在 computed 中完成，从而获得更好的可读性。
watch 属性侦听属性的值变化，并调用相应的方法。watch 属性的使用场景更加灵活，可以被用来处理异步操作或更加复杂的逻辑。
计算属性有缓存机制，侦听属性没有
computed 属性有缓存机制，它会缓存计算结果，只在依赖的变化时重新计算。这样可以提高应用程序的性能。
watch 属性没有缓存机制，它在每次属性变化时都会执行回调函数。
计算属性只能被用于读取
computed 属性只能被用于读取数据，而不能修改数据。如果需要修改数据，可以在组件中使用 methods 属性。
watch 属性可以读取和修改数据，因为它的回调函数是可以修改属性的。
总结
- computed 属性用于计算，watch 属性用于侦听变化。
- computed 属性有缓存机制，watch 属性没有。
- computed 属性只能被用于读取数据，watch 属性可以读取和修改数据。
最好的实践是：
- 使用 computed 属性处理简单的计算。
- 使用 watch 属性处理多重依赖或异步更新的情况。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64dd2402f6b2d6eab3836b58