Vue2.x生命周期函数hooks

参考

1. 实战技巧&＃xff0c;Vue原来还可以这样写
2. Vue 程序化的事件侦听器

知识点

组件的所有生命周期钩子都可以通过&＃64;hook:钩子函数名 来监听触发

定时器清除案例

mounted 和 beforeDestroy 生命周期函数配套使用

export default {data: function () {return {timer: null}},// 创建定时器mounted () {this.timer &＃61; setInterval(() &＃61;> {console.log(&＃39;time&＃39; &＃43; new Date().getTime())}, 1000)},// 删除定时器beforeDestroy () {if (this.timer) {console.log(&＃39;销毁定时器&＃39;)clearInterval(this.timer)}}
}


mounted中处理所有&＃xff08;hook:beforeDestroy&＃xff09;

export default {name: &＃39;&＃39;,mounted () {// 创建一个定时器let timer &＃61; setInterval(() &＃61;> {console.log(&＃39;time&＃39; &＃43; new Date().getTime())}, 1000)// 在销毁之前执行的 hook 方法this.$once(&＃39;hook:beforeDestroy&＃39;, function () {clearInterval(timer)console.log(&＃39;第一个 hook&＃39; &＃43; timer)})// hook 函数可以执行多次this.$once(&＃39;hook:beforeDestroy&＃39;, function () {console.log(&＃39;第二个 hook&＃39; &＃43; timer)})},
}


外部监听生命周期函数

应用场景说明

1. 使用的第三方组件&＃xff0c;对于开发者来说内部就是一个沙盒&＃xff0c;不了解内部的逻辑&＃xff0c;并且不能修改内部代码
2. 希望监听类似change事件&＃xff0c;或者是在组件加载完之后执行某个业务逻辑

案例说明

<template><!--通过&＃64;hook:updated监听组件的updated生命钩子函数--><!--组件的所有生命周期钩子都可以通过&＃64;hook:钩子函数名 来监听触发--><custom-select &＃64;hook:updated&＃61;"myUpdated" />
</template>
<script>
import CustomSelect from &＃39;../components/custom-select&＃39;
export default {components: {CustomSelect},methods: {myUpdated() {console.log(&＃39;custom-select组件的updated钩子函数被触发&＃39;)}}
}
</script>