array(2) { ["docs"]=> array(0) { } ["count"]=> int(0) } 111string(0) "" int(1) int(10) int(70) int(8640000) array(2) { ["docs"]=> array(0) { } ["count"]=> int(0) } vue父子组件生命周期 - 爱码网

vue父子组件生命周期

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

vue父子组件生命周期
vue父子组件生命周期
生命周期演示

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

4》更新数据:
vue父子组件生命周期
index里面的data先被修改,先执行before update 开始出发数据更新,更新的是list,list开始更新,list把数据重新渲染完,即更新完了,这时候index才能说更新完了
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

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

有关面试题

相关文章: