vue父子组件生命周期

一.生命周期(单个组件)
分为 挂载,更新,销毁 三个阶段

在这里插入图片描述
在这里插入图片描述
生命周期演示

二.生命周期(父子组件):
在这里插入图片描述
1》index组件:
在这里插入图片描述
2》list组件:
在这里插入图片描述
在这里插入图片描述
3》直接运行:
在这里插入图片描述
先父组件create初始化创建js模型,然后子组件创建js模型
子组件渲染完之后,父组件再渲染
创建实例是从外到内的,渲染是从内到外的
加载渲染:
父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted

4》更新数据:
在这里插入图片描述
index里面的data先被修改,先执行before update 开始出发数据更新,更新的是list,list开始更新,list把数据重新渲染完,即更新完了,这时候index才能说更新完了
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

5》销毁:
父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

有关面试题

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐