利用hookEvent内部监听组件生命周期函数
例如没有hook的时候,需要在生命周期里使用方法,维护代码也需要往后查看,如果两个函数相差几百行代码呢
mounted() {
window.addEventListener('resize', this.xxx)
},
updated() {
// 干了一些事
},
created() {
// 干了一些事
},
beforeDestroy() {
// 组件销毁时,销毁监听事件
window.removeEventListener('resize', this.xxx)
},
methods: {
xxx() {
xxx
},
// 其他一些方法
}
可以使用hook解决这个问题。this.$once表示此方法只执行一次
mounted() {
window.addEventListener('resize', this.xxx)
// 通过hook监听组件销毁钩子函数,并取消监听事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.xxx)
})
},
updated() {
// 干了一些事
},
created() {
// 干了一些事
},
methods: {
xxx() {
xxx
}
// 其他一些方法
}
利用@hook:钩子函数名 外部监听组件的钩子函数生命周期
利用@hook:updated监听组件的updated钩子函数
<template>
<child @hook:updated="xxx" />
</template>
<script>
import child from '../components/child '
export default {
components: {
child
},
methods: {
xxx() {
console.log('触发child 组件的updated钩子函数')
}
}
}
</script>