[TOC] ### 1. 监听data中的属性 ~~~ data() { return { number: 0 } } watch: { number() { console.log('number发生变化') } ~~~ ### 2. 监听data中对象的属性 ~~~ data() { return { obj:{number: 0} } } watch: { 'obj.number': { console.log('number发生变化') } ~~~ ### 3. 监听props中接收到(父组件传递）的参数 ~~~ props： { number: Number } watch: { number() { console.log('number发生变化') } ~~~ ### 4. 监听路由变化 ~~~ watch: { $route() { //此方式监听的路由在刷新界面时不触发 console.log('number发生变化') } // 刷新页面也会触发写法 watch: { $route: { immediate: true, handler(route) { switch (route.name) { case "Faba": this.menuData = tableData.fabaMenu; break; case "Ssjd": this.menuData = tableData.ssjdMenu; break; case "Check": this.menuData = tableData.ysMenu; break; default: break; } } } }, ~~~ ### 5. 监听通过vuex传递过来的参数 ~~~ watch: { "$store.getters.ghssmap": function() { this.controlLayer(true); } ~~~ ### 6. 监听通过vuex传递过来的参数的另一种写法（先获取再监听） ~~~ <div class="area" v-for="(item,index) of cities" :key="item.id" :ref="index"> <p class="title">{{index}}</p> <div class="list-city" v-for="(city,inx) of item" :key="inx">{{city.name}}</div> </div> ~~~ ~~~ //通过计算属性接收到子组件（word）传递给vuex然后传过来的参数letter computed: { //通过定义参数的函数来获取到参数 letter(){ return this.$store.state.letter } }, watch:{ //通过定义参数的监听函数监听参数的改变从而改变html中设置 :ref="index"属性的值 //:ref="index"为页面所跳转的位置里面传的参数为for循环的对象中的属性名相当于数组中的下标因为循环的是个对象 letter(){ //console.log(1) console.log(this.$refs) //控制页面跳转到本页面中的指定位置 const element = this.$refs[this.letter][0]; this.scroll.scrollToElement(element); } } ~~~ ### 7. 监听对象值的变化 ~~~ data:{ a:1, b:{ value:1， 　　　type:1, } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.value: "+val.value, oldVal.value);//但是这两个值打印出来却都是一样的 }, deep:true } } ~~~