在Vue2的面试中,关于生命周期的问题通常会涉及以下几个方面:
一、Vue2的生命周期概述
- Vue2的生命周期是什么?
- Vue2的生命周期是指从Vue实例的创建、初始化数据、编译模板、挂载Dom、渲染、更新、卸载等一系列过程。
二、生命周期钩子函数
- 列出Vue2的主要生命周期钩子函数。
beforeCreate
:实例创建前,此时data和methods中的数据未初始化,不能使用。created
:实例创建完成后,此时data和methods已经初始化完成,可以调用。beforeMount
:挂载前,此时内存中的模板已编译好,但还未挂载到html界面中。mounted
:挂载后,模板已经挂载到html界面,可以操作页面上的DOM节点。beforeUpdate
:数据更新前,页面未同步(此时页面显示的数据是旧的)。updated
:数据更新后,页面数据已更新。beforeDestroy
:销毁前,此时的实例还未被真正的销毁,Vue实例上的所有的data、methods、指令、过滤器、组件等都还处于可用状态。destroyed
:销毁后,此时的实例已经被销毁,Vue实例上的所有的data、methods、指令、过滤器等都不可用(DOM结构依然存在)。activated
(keep-alive专属):组件被激活时调用。deactivated
(keep-alive专属):组件被销毁时调用。
- 第一次页面加载后会触发哪几个钩子?
beforeCreate
、created
、beforeMount
、mounted
。
三、生命周期钩子函数的使用场景
- Vue获取数据(发送请求)在哪个周期函数?
- 一般情况下,在
created
、beforeMount
、mounted
中均可,因为在这三个钩子函数中,data已经创建完成,可以将服务器端返回的数据进行赋值。但如果要操作DOM,需要在mounted
时操作。
- 一般情况下,在
- 异步请求在
created
中的好处是什么?- 能更快地获取服务器端数据,减少页面loading时间;
- SSR(服务器端渲染)不支持
beforeMount
/mounted
钩子函数,所以放在created
中有助于一致性。
四、父子组件生命周期执行顺序
- 父子组件生命周期的执行顺序是怎样的?
- 组件渲染的顺序是先父后子,渲染完成的顺序是先子后父;
- 组件更新的顺序是先父后子,更新完成的顺序是先子后父;
- 组件销毁的顺序是先父后子,销毁完成的顺序是先子后父。