Vue 的父组件和子组件生命周期钩子函数执行顺序

标签:2024-05-18 19:47:52

加载渲染过程:

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程:

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程:

父 beforeUpdate -> 父 updated

销毁过程:

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

生命周期 阶段 描述
beforeCreated 创建前 vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。
created 创建后 vue实例的数据对象data有了,$el还没有。
beforeMount 模板载入前 vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换
mounted 模板载入后 vue实例挂载完成,data.message成功渲染。
beforeUpdate 组件更新前 组件更新之前调用
updated 组件更新后 组件更新之后调用
beforeDestroy 组件销毁前 调用$destroy方法后,立即执行beforeDestroy
destroyed 组件销毁后 组件销毁后调用,此时只剩下dom空壳
原文出处:http://www.dongblog.com/notes/80.html
来源:博客网 转载请注明出处!

活跃用户

?Deprave.
Ta还没有签名
麟角
Ta还没有签名
f
Ta还没有签名
文川森
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093