Vue父子组件生命周期实际操作

加载渲染过程
-> 父beforeCreate -> 父created -> 父beforeMount
-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted
-> 父mounted

子组件更新过程
-> 父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated

父组件更新过程
-> 父beforeUpdate -> 父updated

销毁过程
-> 父beforeDestroy
-> 子beforeDestroy -> 子destroyed
-> 父destroyed

1、vue的生命周期

2、实际操作
下面我们在实际的代码执行过程中理解父子组件生命周期创建过程以及钩子函数执行的实时状态变化。
测试基于下面的代码，引入vue.js文件后即可执行。（打开页面后，再按一次刷新会自动进入debugger状态）

<style> { } { template: 'from child: {{childMsg}}', props: ['msg'], data: function() } { el: '#app', data: } { }</style>

标签：beforeUpdate,生命周期,beforeCreate,更新过程,实际操作,updated,Vue,组件
来源： https://www.cnblogs.com/meijiao/p/13963348.html