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 } }
作者:孟繁贵 Email:meng010387@126.com 期待共同进步!