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