面试题(二):vue父子组件生命周期执行顺序

55 阅读2分钟

生命周期

1.beforeCreate实例创建前执行。

el 和 data 都为 undefined,还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。

2.created:实例初始化完成后执行。

页面还没开始渲染,不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取,在当前阶段无法与 DOM 进行交互,如果需要,可以通过 $nextTick 来访问 DOM。

3.beforeMount:挂载前执行。

el 和 data 都初始化了,虚拟 DOM 已经创建完成,即将开始渲染。

4.mounted:页面渲染完毕时执行。

真实的 DOM 挂载完成,此时el已经渲染完成并挂载到实例上,可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。

5.beforeUpdate:数据发生更新时执行。

此时 Vue 实例中的数据是最新的了,但是页面中的数据还是旧的,可以在此时进一步更改数据,而不会造成重新渲染。

6.updated:数据发生更新导致的 DOM 重新渲染完成时执行。

此时 DOM 已经更新,可以执行 DOM 相关操作。 虽然updated函数会在数据变化时被触发,但却不能准确的判断是哪个属性值被改变,所以实际情况中用computed或watch函数来监听属性的变化,并做一些其它的操作。

7.beforeDestroy:实例销毁前执行。

实例仍然完全可以使用。在此阶段一般进行善后工作,如清除计时器、解除绑定等。

8.destroyed:实例销毁完成。

实例绑定的所有东西都会被解除,如解除事件监听和对 DOM的数据绑定,所有子实例也统统被销毁,组件被拆解将无法使用。改变 data 也不会再重新渲染,但是 DOM 结构依然存在。

生命周期执行顺序

1、父子组件的加载顺序为
父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted

2、父组件更新顺序为
父beforeUpdate->父updated

3、子组件更新顺序为
父beforeUpdate->子beforeUpdate->子updated->父updated

4、父子组件销毁顺序为
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed