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