比较常见的场景,在初始化钩子中需要执行一段方法,当数据变动时,需要再次执行这个方法,例如搜索功能。
export default {
data() {
return {
input: ""
};
},
created() {
this.getSearchResults();
},
methods: {
getSearchResults() {
// handle search
}
},
watch: {
input() {
this.getSearchResults();
}
}
};
虽然可以实现功能,其实可以更精简。
vue 的 watcher 中可以指定immediate: true
选项,表示组件创建时立即执行。那么,可以对 watcher 进行改写。
watch: {
input: {
handler() {
this.getSearchResults();
},
immediate: true,
}
}
这时,就不需要在created
钩子中再次调用了。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!