vue中hook的两点使用
1. 在同一个组件中 (访问本组件中的生命周期)
例如:在mounted中添加一个监听需要在beforeDistroy中移除这个监听,考虑到某些原因你不想再写个beforeDistroy去实现
mounted () {
window.addEventListener('online', this.handleOnline)
this.$once('hook:beforeDestroy', function () {
window.removeEventListener('online', this.handleOnline)
})
},
就是你在任意地方用 this.$on/$once('hook:生命周期',callback),
就可以监听到生命周期的变化了
2. 在父组件监听子组件的生命周期方法
如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢?
//原来的方式
//父组件中这样写
<rl-child
:value="40"
@childMounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
this.$emit('childMounted')
},
//用 hook 实现方式
//父组件中这样写
<rl-child
:value="40"
@hook:mounted="handleChildMounted"
/>
// 子组件中不用写东西
mounted () {
},
如果:你用的是第三方的组件库,你需要在这个组件发生改变时候做一些操作,巧了这个组件还没有实现@change回调,你怎么获取呢,这个时候你转身发现hook真香唉!