知食记
搜索文档…
Vue lifecycle hook little trick
我们都知道 React Hook 刮起了函数式编程的旋风，与之对应的，Vue 也在 3.0 借鉴了这种思想。不过Vue 3.0 hook 不在本文的讨论范畴，本文将重点总结一下Vue 2.0的生命周期 Hook。
组件上的 hook 小 trick
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下：
Parent.vue
1
<Child @mounted="doSomething"/>
Copied!
Child.vue
1
mounted() {
2
this.$emit("mounted");
3
}
Copied!
此外，还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，代码如下：
1
<Child @hook:mounted="doSomething" />
2
<Child @hook:updated="doSomething" />
Copied!
方法中的 hook 小trick
可以通过一个程序化的侦听器来注册生命周期的绑定
1
mounted: function () {
2
var picker = new Pikaday({
3
field: this.$refs.input,
4
format: 'YYYY-MM-DD'
5
})
6
7
this.$once('hook:beforeDestroy', function () {
8
picker.destroy()
9
})
10
}
Copied!
最近更新 2yr ago