使用hook解决---完美!!!!
一、当是同一个组件的时候
- 写在同一个方法里面防止找不到清除定时器的并且便于查看相关功能
- 当当前组件中有beforeDestroy的定义时,先走此,然后按照绑定顺序走$once方法
/**
* @func
* @desc 定时器使用$once及hook的例子
*/
creatIntervalTwo () {
let timer = setInterval(() => {
console.log(msg);
}, 1000);
//当你不想在页面在建一个beforeDestroy生命周期的时候
this.$once('hook:beforeDestroy', function () {
clearInterval(timer);
});
}
二、 在父组件监听子组件的生命周期方法
如果你在父组件里想在子组件的mounted方法实现一些逻辑时候
1.传统写法
//父组件中
<child-component
@childMounted="childMounted"
></child-component>
//子组件中
mounted () {
this.$emit('childMounted');
}
2.使用hook实现变得更加的简洁
//父组件中这样写
<child-component
@hook:mounted="childMounted"
></child-component>
// 子组件中不用写东西
mounted () {
}
好像看起来除了可以在父组件直接看到子组件的初始化逻辑,其他并没有什么用,但是!!!!!
当你使用第三方组件的时候,你想调用第三方的生命周期是不是就简单了许多呢
注意:虽然官方文档没有说这个 但是确使用了 去看源码就可以发现啦 (src\core\instance\lifecycle.js)