嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号:
yk2012yk2012
,微信公众号:ykyk2012
]
「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战 (opens new window)」
今天我们主要来学习Vue中生命周期,以及父子组件中的生命周期
# 1. vue对象的生命周期
生命周期:
- 又名:生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm 或 组件实例对象。
- 初始化显示
beforeCreate()
created()
beforeMount()
mounted()
- 更新状态
beforeUpdate()
updated()
- 销毁 vue 实例:
vm.$destory()
beforeDestory()
destoryed()
官方的图示
# 2. 原理解释图
# 3. 常用的生命周期方法
mounted()
: 发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】beforeDestroy()
: 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】
# 4. 关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效
- 一般不会在
beforeDestroy
操作数据,因为即使操作数据,也不会再触发更新流程了。
# 5. 示例
<body>
<div id="demo">
<button @click="destoryVM">destroy vm</button>
<p v-show="isShow">YK菌学前端</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {
isShow: true,
},
// 1. 初始化阶段
beforeCreate() {
console.log('beforeCreate()');
},
created() {
console.log('created()');
},
beforeMount() {
console.log('beforeMount()');
},
mounted() { // 初始化显示之后立即调用(1次)
console.log('mounted()');
this.intervalId = setInterval(() => { // 将函数进行参数传递,最好用箭头函数,因为它函数内部没有this,直接用外面的this
this.isShow = !this.isShow;
}, 1000)
},
// 2. 更新阶段
beforeUpdate() {
console.log('beforeUpdate()');
},
updated() {
console.log('updated()');
},
// 3. 死亡阶段
beforeDestroy() { // 死亡之前调用(1次)
console.log('beforeDestroy()');
clearInterval(this.intervalId); //清除定时器
},
destroyed() {
console.log('destroyed()');
},
methods: {
destoryVM() {
this.$destroy(); // 内存泄漏,定时器还没有清除
}
},
})
</script>
</body>
# 6. 父子组件的生命周期
- 加载渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
- 常见钩子版本
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
最后,欢迎关注我的专栏,和YK菌做好朋友