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