虽然说生命周期各种博客都有写,但还是想来点属于自己的输出吧,用于自己对于生命周期的一个学习总结!
一、Vue生命周期的四个阶段
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
二、生命周期图示
一张来自官网的本人加工图。
图片上有8个生命周期的钩子函数,但是官网中给出了11个钩子函数,我们看下表格的介绍,里面给出10个钩子函数!
生命周期描述:
beforeCreate | 组件实例被创建之初,组件的属性生效之前 |
created | 数据初始化完成,组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,组件渲染完毕 |
beforeUpdate | 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前 |
update | 组件数据更新之后 |
activited | keep-alive 专属,组件被激活时调用deactivated |
deactivated | keep-alive 专属,组件被销毁时调用 |
beforeDestory | beforeDestory |
destoryed | 组件销毁后调用 |
哪个钩子使用异步请求(也就是所谓的加载数据):
可以在钩子函数 created、beforeMount、mounted
- 能更快获取到服务端数据,减少页面 loading 时间,因为这个时候数据已经被加载了;
- 查到SSR 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性
在什么阶段才能访问操作DOM?
在mounted钩子里,页面已经被渲染完毕,所以在 mounted 中可以访问操作 DOM!
说说keep-alive吧
- 一般结合路由和动态组件一起使用,用于缓存组件,大大的提高了页面的性能;
- 提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;
- 对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated,而且用了keep-alive,组件时不会被销毁的。
三、父子组件的钩子执行顺序
加载渲染过程
父子组件更新过程
父子组件的销毁
四、父组件怎么监听子组件的生命周期:
比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:
有两种方式
方式一:通过子组件向父组件使用$emit的方式,代码如下:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
方式二:采用hook的方式,代码如下:
// Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
}
附加:
在vue3中,生命周期发生了些许的变化:但是万变不离其宗,我也在努力的学习中~
我们稍微看看变化:
我们上面生命周期是 Vue2 中的生命周期,而在即将到来的 Vue3 中,Vue的生命周期发生了些许的变化,其对应关系如下:
- beforeCreate -> use setup()
- created -> use setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
而且,在 Vue3 中,生命周期的使用方法也发生了变化,我么的生命周期同过按需加载的方式使用:
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}