[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 } } ~~~