Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

1 . 相信有很多人都认为

computed

能实现的功能

methods

一样能实现, 对吧?其实确实是这样,

computed

能现实的methods确实能是现实,但是显示的过程可以有很大的差别的, 我就大家在这举一个列子来说明:

假设现象一下购物车结算场景，用户选中商品的总金额是根据商品数量、选中商品种类数 和商品单价来变化的。

我们直接这样就可以算出选中金额的总数:

computed:{
totalPrice(){
let totalPrice = 0
this.listOfArticles.forEach(food => {
totalPrice += food.price + food.count
})
return totalPrice // 我们只需要在模板中使用 {{ totalPrice }} 就可以表示选中的商品价格
}
}

看到这里, 也许很多同学会有疑问, 使用

methdos

定义一个

totalPrice

方法和这个差不多啊?

其实有本质的区别,

computed

是

基于它的依赖进行缓存的。computed

只有在它的相关依赖发生变化才会重新计算求值。在本例子中也就是意味着只要价格和数量发生变化,

totalPrice

方法才会执行, 而只要价格和数量没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。

看到这里有同学又会想 我们为什么需要缓存？

假设我们有一个性能开销比较大的的计算属性

A

，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于

A

。如果没有缓存，我们将不可避免的多次执行

A

的

getter

！

如果你不希望有缓存，请用方法来替代。

2 . 说了这么多，下面先对

watch

和

computed

:

首先它们都是以

Vue

的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。

但

watch

和

computed

也有明显不同的地方：

watch

和

computed

各自处理的数据关系场景不同

(1).

watch

擅长处理的场景：一个数据影响多个数据

(2).

computed

擅长处理的场景：一个数据受多个数据影响

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如Vue官网上这个例子: 侦听器