Vue由淺入深系列(二)詳解Watch偵聽器

watch監聽器主要是用來監聽變量的變化，而後經過對變量的監聽，在鉤子函數中寫入相應的操做。

1.對於普通變量的監聽

• 比方說要對data中的count變量進行監聽，其中有兩個回調參數，一個是新的值，一個是舊的值，即改變後和改變以前的值

export default {
    name: "Test",
    data(){
        return{
            count:0,
        }
    },
    watch:{
        count(newValue,oldValue){
            //do something
        }
    },
}
複製代碼

2.對於對象的監聽

• 若是咱們監聽的是一個對象，會發現執行this.queryList.name='jack',是沒法觸發watch監聽的

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:'',
            }
        }
    },
    watch:{
        queryList(newValue,oldValue){
            //do something
        }
    },
}
複製代碼

• 這時候就須要用到deep屬性進行深度監聽，監聽器會一層層的往下遍歷，給對象的全部屬性都加上這個監聽器，可是這樣性能開銷就會很是大了，任何修改queryList裏面任何一個屬性都會觸發這個監聽器裏的handler。

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:'',
            }
        }
    },
    watch:{
      queryList:{
          handle(newValue,oldValue){
            //do something
          },
          deep:true,
      }
    },
}
複製代碼

• 可是有的時候，比方說我只想監聽queryList.name的變化，對於queryList.count不須要監聽，那麼咱們能夠採用下面的這種寫法，能作到只對這個對象裏的特定屬性進行屬性監聽的同時，相比於監聽整個對象而言有更多的性能提高

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:''
            }
        }
    },
    watch:{
      'queryList.name':{
          handle(newValue,oldValue){
            //do something
          },
      }
    },
}
複製代碼

3.在首次綁定的時候當即觸發監聽

• 比方說是文章的詳情頁面，根據文章的id渲染相應的文章詳情，經過對路由信息$route.query.id進行監聽,而後調用相應的接口獲取數據，固然能夠在created或者mounted生命週期中寫入事件，但若是隻經過watch實現，咱們一樣也能夠作到，那就是使用watch的immediate屬性，設置爲true，無論這個值是否發生過改變，就會在初始化之後當即先去執行裏面的handler方法

watch:{
  '$route.query.id':{
      handle(newValue,oldValue){
        //do something
      },
      immediate:true
  }
},
複製代碼