Vue 生命周期
Vue 生命周期
| vue 2.0 名称 | vue 3.0 名称 | 用途 |
|---|---|---|
| beforeCreate created | setup | 开始创建组件 创建data和method 在 beforeCreate 和 created 之前执行 vue3 中没有 beforeCreate 和 created 钩子函数 |
| beforeMount | onBeforeMount | 组件挂载到节点之前执行 |
| mounted | onMounted | 组件挂载完成后执行 |
| beforeUpdate | onBeforeUpdate | 组件更新之前执行 |
| updated | onUpdated | 组件更新完成之后执行 只有页面中使用的 data 更新 才会被触发 渲染到页面的数据被更改了 |
| beforeDestroy | onBeforeUnmount | 组件卸载之前执行 定时器清除 |
| destroyed | onUnmounted | 组件卸载完成后执行 |
Vue2和Vue3的生命周期区别：
- beforeCreate 、created 两个钩子被setup来替代
- destory（vue 2.0） 改名为 unmounted（vue 3.0） 卸载
- vue 3.0 中都是以引入的形式加载，使用时前面都加 on 且都采用调用函数的方式 onMounted(()=>{})
父子组件嵌套生命周期执行顺序
1.初始化与挂载生命周期的顺序
vue 2.0: 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> -> 子 beforeMount -> 子 mounted ->父 mounted
vue 3.0: 父 setup -> 父 onBeforeMount -> 子 setup -> 子 onBeforeMount -> 子 onMounted -> 父 onMounted
执行顺序：父组件的生命周期到虚拟DOM挂载后开始执行子组件的生命周期，最后在执行父组件的真实DOM挂载
注意事项：setup 是在组件的创建阶段执行的，而不是挂载阶段
2.父子组件更新前后生命周期的顺序(vue 2.0 和 vue 3.0 顺序一样)
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
执行原理：为保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图
3.父子组件销毁前后生命周期的顺序(vue 2.0 和 vue 3.0 顺序一样)
vue 2.0: 父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
vue 3.0: 父 onBeforeUnmount->子 onBeforeUnmount->子 onUnmounted->父 onUnmounted
当子组件全部销毁完成后，才会开始销毁父组件。以确保子组件中的任何相关的依赖和引用在销毁父组件时不会出现问题
