共计 1091 个字符，预计需要花费 3 分钟才能阅读完成。
watch 与 computed 都是以 Vue 的依赖追踪机制为根底的，它们都试图解决这样一件事件：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相干”数据“主动”发生变化，也就是主动调用相干的函数去实现数据的变动。
它们与 methods 中办法的区别就在于，methos 外面的办法须要手动去调用，而它们会主动执行。
watch
1、watch 善于解决的场景：一个数据影响多个数据
2、应用
<div id="app">
<div>
<span> 数量: {{num}}</span>
</div>
<button @click="sub"> 数量减一 </button>
</div>
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--;},
})
3、总结
* 相似监听机制 + 事件机制
computed
1、computed 善于解决的场景：一个数据受多个数据影响
2、应用
<div id="app">
<div>
<span> 数量: {{num}}</span>
</div>
<div>
<span> 单价: {{price}}</span>
</div>
<div>
<span> 总价: {{totalPrice}}</span>
</div>
<button @click="add"> 数量加一 </button>
</div>
new Vue({
el: '#app',
data: {
num: 0,
price: 0,
},
computed: {
// 监听总价的变动
totalPrice: function () {return this.price * this.num;},
},
methods: {add: function () {this.num++;},
})
3、总结
* 反对缓存, 有依赖数据发生变化时才会从新计算
* 性能开销更小
* 不反对异步
* 属于计算属性, 应用上和 data 对象里的数据属性是同一类的
集体认识
watch 更实用的场景是当某个数据发生变化时, 应的去做出相干的操作,computed 更实用于间接计算数据, 如在统计购物车的总价时, 数量产生扭转时, 价可能自动更新, 而不必写一个计算总价的办法, 而后每次更改数量时进行调用, 缩小了性能的开销.
若有相干谬误, 心愿大佬可能指出????
正文完