Vue.js 是一个流行的 JavaScript 框架，它可以帮助我们构建高效、可维护的 Web 应用程序。Vue.js 提供了两个非常有用的选项：computed 和 watch。这两个选项都可以用来监听数据的变化并触发响应的函数。在本文中，我们将比较这两个选项的优缺点，并介绍如何在实际项目中使用它们。
computed 属性
computed 属性是一个计算属性，它可以根据一个或多个数据的变化动态计算出一个新的值。computed 属性会缓存计算结果，只有在依赖的数据发生变化时才会重新计算。这样可以避免重复计算浪费性能。
computed 属性通常用于计算一些复杂的逻辑或过滤数据。例如，我们可以使用 computed 属性来计算一个数组中所有元素的总和：
computed: {
total: function () {
return this.items.reduce(function (sum, item) {
return sum + item.price;
}, 0);
}
}在上面的代码中，我们定义了一个名为 total 的计算属性，它会根据 items 数组中每个元素的 price 属性计算出总和。每当 items 数组中的元素发生变化时，total 属性都会被重新计算。
watch 属性
watch 属性是一个观察属性，它可以监听一个数据的变化并在变化时执行一个函数。watch 属性不会缓存计算结果，每次数据变化时都会重新执行函数。
watch 属性通常用于监听一些需要异步处理的数据变化，例如发送网络请求或执行一些复杂的动画效果。例如，我们可以使用 watch 属性来监听一个搜索框的输入，并在输入发生变化时发送一个搜索请求：
watch: {
searchText: function (newVal, oldVal) {
this.search(newVal);
}
}在上面的代码中，我们定义了一个名为 searchText 的数据属性，并使用 watch 属性来监听它的变化。每当 searchText 发生变化时，watch 属性都会调用 search 方法来发送搜索请求。
computed 和 watch 的比较
computed 和 watch 都可以用来监听数据的变化并触发响应的函数，它们之间的区别在于：
- computed 属性可以缓存计算结果，只有在依赖的数据发生变化时才会重新计算。watch 属性不会缓存计算结果，每次数据变化时都会重新执行函数。
- computed 属性通常用于计算一些复杂的逻辑或过滤数据。watch 属性通常用于监听一些需要异步处理的数据变化。
根据不同的需求，我们可以选择使用 computed 属性或 watch 属性。在实际项目中，我们可以根据数据的复杂度和计算量来选择使用 computed 属性或 watch 属性。
实例
下面是一个使用 computed 属性和 watch 属性的示例：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------
---------- --------------- ------
---------- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
------ --
--
--
--------- -
----------------- -
------ ------------------------------------------
--
--
------ -
--------------- ------- -
-------------
--
--
--
---------在上面的代码中，我们定义了一个名为 message 的数据属性，并使用 v-model 指令将输入框和数据属性绑定在一起。我们还定义了一个名为 reversedMessage 的计算属性，它会根据 message 属性的值计算出反转后的字符串。每当 message 发生变化时，reversedMessage 属性都会被重新计算。
我们还定义了一个名为 count 的观察属性，它会监听 message 属性的变化并增加一个计数器。每当 message 发生变化时，watch 属性都会执行一个函数来增加计数器的值。
结论
在 Vue.js 中，computed 和 watch 都是非常有用的选项，它们可以帮助我们监听数据的变化并触发响应的函数。computed 属性适用于计算一些复杂的逻辑或过滤数据，watch 属性适用于监听一些需要异步处理的数据变化。在实际项目中，我们可以根据数据的复杂度和计算量来选择使用 computed 属性或 watch 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743cb3ef3dd653032985d1a