vue 監聽 watch 使用

1、api

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

有2個配置：

（1）深度 watcher

deep: true
（2）該回調將會在偵聽開始之后被立即調用

immediate: true

2、使用場景

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