vue 監聽 watch 使用

一、api

https://cn.vuejs.org/v2/api/#watch

有2個配置：

（1）深度 watcher

deep: true
（2）該回調將會在偵聽開始以後被當即調用

immediate: true

二、使用場景

created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } }

組件建立的時候咱們獲取一次列表，同時監聽input框，每當發生變化的時候從新獲取一次篩選後的列表這個場景很常見，有沒有辦法優化一下呢？

招式解析：
首先，在watchers中，能夠直接使用函數的字面量名稱；其次，聲明immediate:true表示建立組件時立馬執行一次。

watch: { searchInputValue:{ handler: 'fetchPostList', immediate: true } }

 例若有請求須要再也沒初始化的時候就執行一次，而後監聽他的變化，不少人這麼寫：

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

上面的這種寫法咱們能夠徹底以下寫：

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}