当前位置: 首页 > Web前端 > vue.js

watch和computed在Vue.js中的使用和区别

时间:2023-03-31 18:13:19 vue.js

watch和computed是基于Vue的依赖跟踪机制。他们都试图处理这样的事情:当某个数据(称为依赖数据)发生变化时,所有依赖于这个数据的“相关”数据都会“自动”发生变化,即自动调用相关函数来实现数据改变。它们和methods中的方法的区别在于methos中的方法需要手动调用,但是会自动执行。watch1,watch擅长处理的场景:一个数据影响多个data2,使用

quantity:{{num}}
数量减一
newVue({el:'#app',data:{num:2,},watch:{num:{handler(newVal,oldVal){if(newVal==0&&oldVal==1){console.log(`产品数量从${oldVal}减少到${newVal},立即删除`);console.log('删除产品');}else{console.log('numberreduction');}}}},methods:{sub:function(){this.num--;},})3.总结*类似于监控机制+事件机制computed1,computed擅长处理场景:一个数据受多个数据影响2.使用
数量:{{num}}
单价:{{price}}
总价:{{totalPrice}}
数量加一