vue的生命周期的相关问题
1、vue的生命周期那几个?每一个生命周期的特点,可以做什么?
vue的生命周期就是vue实例从创建到销毁
的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、销毁等一系列的过程。主要分为8个阶段:创建前后、载入前后、更新前后、销毁前后,以及一些特殊场景的生命周期。
生命周期 | 描述 | 作用 |
---|---|---|
beforeCreate | 创建前 | 这个时候data中的数据,还未定义,所以不能使用,执行一些初始化任务 |
created | 创建后 | 最早开始使用 data和methods中数据的钩子函数,组件实例已经完全创建 |
beforeMount | 挂载前 | 指令已经解析完毕内存中已经生成dom树,但是尚未挂载到页面中去,此时页面还是旧的。 |
mounted | 挂载后 | dom已经渲染完毕,此时页面和内存中都是最新的数据,最早可以操作DOM元素钩子函数 |
beforeUpdate | 更新前 | 当视图层的数据发生改变会执行这个钩子 , 内存更新,但是DOM节点还未更新,数据没有与页面同步 |
updated | 更新后 | 数据更新完成以后触发的方法,DOM节点已经更新 |
beforeDestroy | 销毁前 | data和methods中的数据此时还是可以使用的,可以做一些释放内存、清除定时器、解绑事件 等的操作 |
destroyed | 销毁后 | 组件已经全部销毁,Vue实例已经被销毁,Vue中的任何数据都不可用 |
其他三个生命周期 | 描述 |
---|---|
activated | 被 keep-alive 缓存的组件激活时调用。 |
deactivated | 被 keep-alive 缓存的组件停用时调用。 |
errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
用 keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数,命中缓存渲染后会执行activated钩子函数
Vue3.0中的生命周期做了一些改动:
生命周期 | 描述 |
---|---|
beforeCreate -> setup() | 开始创建组件之前,创建的是data和method |
created -> setup( ) | |
beforeMount -> onBeforeMount | 组件挂载到节点上之前执行的函数。 |
mounted -> onMounted | 组件挂载到节点上之前执行的函数。 |
beforeUpdate -> onBeforeUpdate | 组件更新之前执行的函数。 |
Update - > onUpdated | 组件更新完成之后执行的函数 |
beforeDestroy -> onBeforeUnmount | 组件卸载之前执行的函数。 |
destroyed -> onUnmounted | 组件卸载之前执行的函数。 |
- vue的实例加载完成是在哪个声明周期完成呢?-----
beforeCreate(创建前) - vue的dom挂载完成是在哪个声命周期里呢?-----mounted(挂载后)
2、created 和 mounted 的区别?
相同点:
都能拿到实例对象的属性和方法,但是如果在mounted请求数据,有可能会导致页面闪动
不同点:
created 模板渲染成html前调用
,即通常初始化某些属性值,然后再渲染成视图。这时候页面dom节点并未生成
mounted 在模板渲染成html后调用
,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
created的触发时机要比mounted更早一些
3、从A页面跳转到B页面执行了哪些生命周期?
A页面-----------> beforeCreate
A页面-----------> created
A页面-----------> beforeMount
A页面-----------> mounted
B页面-----------> beforeCreate
B页面-----------> created
B页面-----------> beforeMount
A页面-----------> beforeDestroy
A页面-----------> destroyed
B页面-----------> mounted
在B页面beforeMount挂载前和挂载后mounted之间A页面才执行销毁前后的钩子函数
4、一般在哪个生命周期请求异步数据?
可以在created、beforeMount、mounted
这三个钩子函数中进行调用,因为在这三个钩子函数中data已经创建,可以将服务端返回的数据进行赋值。
建议在created
钩子函数中请求数据,能更快获取服务端数据,减少页面加载时间,用户体验更好。
SSR(服务端渲染)支持beforeMount、mounted钩子函数,放在created中有助于一致性;
5、父子组件的生命周期执行顺序?
-
组件的加载渲染过程:
父组件 -----> beforeCreate
父组件 -----> created
父组件 ------>beforeMount
子组件 -------> beforeCreate
子组件 -------> created
子组件 -------> beforeMount
子组件 --------> mounted
父组件 --------> mounted -
更新过程:
父组件 -----> beforeUpdate
子组件 ------> beforeUpdate
子组件-------> updated
父组件-------> updated -
销毁过程
父组件----->beforeDestory
子组件----->beforeDestory
子组件------>destroyed
父组件------>destroyed
6、组件和页面的生命周期的实现顺序
页面 -----> beforeCreate
页面 -----> created
页面 ------>beforeMount
组件 -------> beforeCreate
组件 -------> created
组件 -------> beforeMount
组件 --------> mounted
页面 --------> mounted
7、生命周期钩子是如何实现的
Vue 的生命周期钩子核心实现是利用发布订阅模式
,先把用户传入的的生命周期钩子订阅好(内部采用数组的方式存储),然后在创建组件实例的过程中会一次执行对应的钩子方法(发布)