Vue的watch主要用于监听data或computed中的值变化,只要监听的属性有变化,那就会执行指定的代码。
watch接收2个参数,newVal和oldVal,分别代表变化后和变化前的值。
基本用法如下:
① 监听普通的单个值变化
1 watch: { 2 isCollapse(newVal, oldVal) { 3 console.log(`改变前是${oldVal},改变后是${newVal}`) 4 } 5 }
② 监听路由的变化
1 watch: { 2 $route(to, from, next) { 3 console.log(`路由跳转前是${from},跳转后是${to}`) 4 next() // 必须执行next函数才能继续完成路由跳转,参数传false阻止路由跳转 5 } 6 }
③ 监听对象里面的key的变化
单个监听:
1 watch: { 2 "Form.id": { 3 handler(newVal, oldVal) { 4 console.log(`改变前是${oldVal},改变后是${newVal}`) 5 }, 6 deep: true, 7 } 8 }
整体监听:
watch: { Form: { handler(newVal, oldVal) { console.log(`改变前是${oldVal},改变后是${newVal}`) }, deep: true, } }
④ 监听数组的变化类似于监听对象整体