这个已经算是一个比较常见的技巧了,这里就简单说一下。当 watch 一个变量的时候,初始化时并不会执行,如下面的例子,你需要在created
的时候手动调用一次。
// bad
created() {
this.fetchUserList();
},
watch: {
searchText: 'fetchUserList',
}
你可以添加immediate
属性,这样初始化的时候也会触发,然后上面的代码就能简化为:
// good
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true,
}
}
ps: watch 还有一个容易被大家忽略的属性deep
。当设置为true
时,它会进行深度监听。简而言之就是你有一个 const obj={a:1,b:2}
,里面任意一个 key 的 value 发生变化的时候都会触发watch
。应用场景:比如我有一个列表,它有一堆query
筛选项,这时候你就能deep watch
它,只有任何一个筛序项改变的时候,就自动请求新的数据。或者你可以deep watch
一个 form 表单,当任何一个字段内容发生变化的时候,你就帮它做自动保存等等。