Vue 父子组件生命周期执行顺序
目录分析挂载阶段更新阶段销毁阶段总结生命周期1.分析在父子组件中分别打印日志,可以得出以下执行顺序。1.1.挂载阶段该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为:父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子crea
目录
1.分析
在父子组件中分别打印日志,可以得出以下执行顺序。
1.1.挂载阶段
该过程主要涉及 beforeCreate
、created
、beforeMount
、mounted
4 个钩子函数。执行顺序为:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
一定得等子组件挂载完毕后,父组件才能挂在完毕,所以父组件的 mounted 在最后。
1.2.更新阶段
该过程主要涉及 beforeUpdate
、updated
2 个钩子函数。注意,当父子组件有数据传递时,才有这个更新阶段执行顺序的比较。执行顺序为:
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
1.3.销毁阶段
该过程主要涉及beforeDestroy
、destroyed
2 个钩子函数。执行顺序为:
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
1.4.总结
Vue 父子组件生命周期钩子的执行顺序遵循:从外到内,再从内到外。
2.生命周期
这里介绍常用的 8 个。
- beforeCreate:实例创建前执行。
el 和 data 都为 undefined,还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。 - created:实例初始化完成后执行。
页面还没开始渲染,不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取,在当前阶段无法与 DOM 进行交互,如果需要,可以通过 $nextTick 来访问 DOM。 - beforeMount:挂载前执行。
el 和 data 都初始化了,虚拟 DOM 已经创建完成,即将开始渲染。 - mounted:页面渲染完毕时执行。
真实的 DOM 挂载完成,可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。 - beforeUpdate:数据发生更新时执行。
此时 Vue 实例中的数据是最新的了,但是页面中的数据还是旧的,可以在此时进一步更改数据,而不会造成重新渲染。 - updated:数据发生更新导致的 DOM 重新渲染完成时执行。
此时 DOM 已经更新,可以执行 DOM 相关操作。 - beforeDestroy:实例销毁前执行。
实例仍然完全可以使用。在此阶段一般进行善后工作,如清除计时器、解除绑定等。 - destroyed:实例销毁完成。
实例绑定的所有东西都会被解除,如解除事件监听和对 DOM的数据绑定,所有子实例也统统被销毁,组件被拆解将无法使用。改变 data 也不会再重新渲染,但是 DOM 结构依然存在。
更多推荐
所有评论(0)