computed 和 watch 的区别
2021-07-29 13:06:27
computed 和 watch 的区别
在Vue.js框架中，computed（计算属性）和watch（侦听属性）都是用于响应式地处理数据变化的机制，但它们在使用场景、功能、性能和实现方式上有所不同。
一、功能上
computed（计算属性）：
计算属性是基于data中的已知值，通过某种计算逻辑得到的一个新值。
这个新值具有缓存特性，即只有当其依赖的已知值发生变化时，才会重新计算新值。
计算属性通常用于处理复杂的数据逻辑，如字符串反转、数组过滤等。
watch（侦听属性）：
侦听属性用于监听data中某个数据的变化。
当被监听的数据发生变化时，可以执行特定的回调函数来处理这些变化。
侦听属性通常用于执行异步操作、深度监听对象或数组的变化等。
二、使用上
computed：
计算属性中的函数必须返回一个值，这个值就是计算属性的结果。
计算属性在模板中可以直接当作普通属性来使用，无需调用函数。
watch：
侦听属性的回调函数中会传入被监听属性的新旧值，通过这两个值可以进行一些特定的操作。
侦听属性的回调函数不是必须返回值的，它主要用于执行一些副作用操作，如更新其他数据、调用API等。
三、性能上
computed：
由于计算属性具有缓存特性，当依赖的已知值没有发生变化时，计算属性的结果会从缓存中读取，而不是重新计算。
这使得计算属性在处理复杂数据逻辑时具有更高的性能。
watch：
侦听属性在每次被监听的值发生变化时都会执行回调函数，无论这个变化是否导致了实际的结果变化。
因此，在性能上可能不如计算属性高效，特别是在需要频繁监听多个数据变化的情况下。
四、场景上
computed：
当一个属性受多个属性影响时，使用计算属性可以方便地处理这些依赖关系。
例如，在购物车商品结算场景中，总价可能受商品单价、数量和优惠券等因素的影响，此时可以使用计算属性来计算总价。
watch：
当一条数据的变化需要影响多条数据时，使用侦听属性可以方便地处理这些变化。
例如，在搜索框场景中，当用户输入搜索关键词时，可能需要实时更新搜索结果列表。此时可以使用侦听属性来监听搜索关键词的变化，并在回调函数中更新搜索结果。
综上所述，computed和watch在Vue.js中各有其独特的用途和优势。在选择使用哪种机制时，应根据具体的应用场景和需求来决定。
热门标签
