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更实用于间接计算数据,如在统计购物车的总价时,数量产生扭转时,价可能自动更新,而不必写一个计算总价的办法,而后每次更改数量时进行调用,缩小了性能的开销.
若有相干谬误,心愿大佬可能指出????