Vue.js 是一款十分流行的前端框架，其中 computed 和 watch 是非常重要的两个概念。computed 可以用来定义计算属性，watch 可以用来监听数据的变化。本文将深入探讨这两个概念的使用方法和优化技巧。
computed
computed 是一种用于计算和返回值的函数。它可以缓存结果，只要没有相关的依赖值发生变化，那么计算结果就会被缓存起来。这意味着可以避免重复计算。其中，依赖值包括 data 中的属性和其他 computed 属性。
下面是一个计算商品总价的例子：
-- -------------------- ---- -------
----------
-----
------ ----------------
------ -------------------
-------- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--------- -
--
--
--------- -
------- -
------ ---------- - --------------
-
-
--
---------这个例子中，computed 属性 total 的值是由 price 和 quantity 计算得到的，只要这两个值不发生变化，total 的值就不会被重新计算。
在使用 computed 属性时，我们需要遵守以下几个原则：
- computed 函数应该是纯函数（即，在计算时不应该修改其他组件的数据）
- computed 函数应该是轻量级的，避免影响页面性能
如果计算复杂度较高，可能会影响页面性能。接下来，我们将介绍一些提高性能的技巧。
缓存
在默认情况下，computed 属性是所有依赖值都发生改变时才会被重新计算的。但是在某些情况下，我们需要在某个特定的值改变时才重新计算 computed 属性。Vue.js 提供了一个特殊的写法，用于实现缓存：
-- -------------------- ---- -------
--------- -
------------- -
------ ---------- - --------------
-
--
------ -
------ -
--------- -
-----------------
-
--
--------- -
--------- -
-----------------
-
-
-在这个例子中，我们定义了一个 computed 属性 cachedTotal，并在 watch 选项中监听 price 和 quantity 的变化，一旦它们中的任何一个变化，那么 cachedTotal 就会被重新计算。
计算属性的延迟执行
在某些情况下，性能问题可能会导致 computed 属性值被频繁重新计算，这会浪费计算资源。Vue.js 提供了一个延迟执行的方法，用于对性能进行优化：
-- -------------------- ---- -------
--------- -
------- -
------ ---------- - --------------
-
--
------ -
------ -
---------- ------
--------- -
-----------
-
--
--------- -
---------- ------
--------- -
-----------
-
-
-在这个例子中，watch 函数就会在页面渲染后才会被执行，因此在修改 data 中的属性时计算属性不会被频繁重新计算。
watch
watch 是一个用于监听变化的选项。它可以在一个数据对象中监听一个特定的属性，以便在该属性值改变时触发回调函数。
下面是一个 watch 的例子：
-- -------------------- ---- -------
----------
-----
------ ----------------
----- ------ ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
------- --
--
--
------ -
------------ -
----------- - -----------------------------------
-
-
--
---------在这个例子中，我们监听了 data 中的 items 属性，一旦它发生变化，watch 函数就会被触发，从而修改 result 属性的值。
当使用 watch 选项时，我们需要注意以下几点：
- watch 函数可能会被频繁调用，因此需要避免对性能产生负面影响
- watch 函数应该是纯函数，不应该改变其他组件的属性
防抖和节流
在某些情况下，watch 函数可能会被频繁调用，从而降低页面性能。Vue.js 提供了两种优化策略，即防抖和节流。
防抖是指在连续触发事件时，只会在间隔一定时间后执行函数。这意味着，如果在这段时间内事件再次触发，计时器就会重新开始。防抖的代码如下：
watch: {
items: {
handler: debounce(function(value) {
this.result = value.split("").reverse().join("");
}, 500)
}
}在这个例子中，我们定义了一个 debounce 函数，它会在 items 属性变化时被触发。如果在 500 毫秒内 items 属性再次变化，就会重新开始计时。
节流是指在一段时间内只执行一次函数。这意味着，如果在这段时间内函数被多次调用，只会触发一次。节流的代码如下：
watch: {
items: {
handler: throttle(function(value) {
this.result = value.split("").reverse().join("");
}, 500)
}
}在这个例子中，我们定义了一个 throttle 函数，它会在 items 属性变化时被触发。如果在 500 毫秒内 items 属性被多次触发，只会执行一次。
总结
computed 和 watch 是我们在 Vue.js 中经常使用的选项。在使用这些选项时，我们需要注意性能问题，遵循一些最佳实践：
- computed 函数应该是纯函数，避免对其他组件产生负面影响
- computed 函数应该是轻量级的，避免影响页面性能
- watch 函数应该是纯函数，避免对其他组件产生负面影响
- watch 函数应该避免被频繁调用，可以使用防抖或节流处理
如果我们能够遵守上述原则，那么 computed 和 watch 就能够为我们提供高效、优雅、可维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476d49c968c7c53b03748ee