Vue.js之watch与computed的使用及区别

watch与computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
它们与methods中方法的区别就在于,methos里面的方法需要手动去调用,而它们会自动执行。

watch

1、watch擅长处理的场景:一个数据影响多个数据
2、使用

数量: {{num}}
new Vue({ el: '#app', data: { num: 2, }, watch: { num: { handler(newVal, oldVal) { if (newVal == 0 && oldVal == 1) { console.log(`商品数量从${oldVal}减为 ${newVal}, 马上执行删除`); console.log('删除商品'); } else { console.log('数量减少'); } } } }, methods: { sub: function () { this.num--; }, })

image.png

3、总结

* 类似监听机制+事件机制

computed

1、computed擅长处理的场景:一个数据受多个数据影响
2、使用

数量: {{num}}
单价: {{price}}
总价: {{totalPrice}}
new Vue({ el: '#app', data: { num: 0, price: 0, }, computed: { // 监听总价的变化 totalPrice: function () { return this.price * this.num; }, }, methods: { add: function () { this.num++; }, })

Vue.js之watch与computed的使用及区别_第1张图片
3、总结

* 支持缓存,有依赖数据发生变化时才会重新计算
* 性能开销更小
* 不支持异步
* 属于计算属性,使用上和data对象里的数据属性是同一类的

个人看法

watch更适用的场景是当某个数据发生变化时,应的去做出相关的操作,computed更适用于直接计算数据,如在统计购物车的总价时,数量发生改变时,价能够自动更新,而不用写一个计算总价的方法,然后每次更改数量时进行调用,减少了性能的开销.

若有相关错误,希望大佬能够指出

你可能感兴趣的