vue组件的生命周期

vue2生命周期

vue2中生命周期钩子函数大致分为三个阶段，8个生命周期钩子函数。分别是：
vue2和vue3钩子函数 --- 选项式API

1. beforeCreate(){} --- 创建前，还无法访问组件中的数据
2. created(){} --- 创建后，可以访问组件中的数据
3. beforeMount(){} --- 挂载前，跟created一样可以访问组件中的数据，但还不能访问渲染好的dom元素
4. mounted(){} --- 挂载后，数据和渲染好的dom元素都可以访问了
5. beforeUpdate(){} --- 更新前，可以访问要更新的数据，但无法访问更新后的dom节点
6. updated(){} --- 更新后，可以访问更新后的dom节点了
7. beforeDestroy(){} --- 销毁前，还可以访问组件中的数据和dom结构
8. destroyed(){} --- 销毁后，访问不到组件中的数据和dom结构了。

三个阶段分别是：

• 创建阶段

  • 初始化vue实例，生命周期还没有开始
  • 初始化内部的一些事件(开始监听数据)，这时生命周期开始
  • 注入数据，开始劫持(这个时候vue实例上面就有了响应式数据)

  • 判断是否有el选项，没有的话，就会一直等待vue实例调用$mounte方法传入el

    • 如果有，就将template提供的结构编译在渲染函数中
    • 如果没有：就编译el的outerHTML，让它成为渲染模版
  • 给vue实例创建$el属性，值是编译好的模版结构，并使用编译好的模版结构，将传入的el内容替换掉(就是将编译好的内容，显示在页面中)

• 更新阶段

  • vue一直等待数据的更新
  • 数据更新后，重新渲染页面(异步行为--等所有同步执行完成后再执行异步)

• 销毁节点

  • vue一直等待调用 $destroy 销毁方法
  • 调用方法后就销毁实例，以后再改数据，页面也不会响应了。

  

vue3生命周期

vue3钩子函数 --- 组合式API

1. onBeforeMounte(()=>{}) --- 挂载前，跟created一样，可以访问组件中的数据，但是还不可以访问渲染好的dom节点
2. onMounted(()=>{}) --- 挂载后，可以访问数据 和 渲染好的dem节点了
3. onBeforeUpdate(()=>{}) --- 更新前，可以访问要更新的数据(更新前的数据),还不能访问更新后的数据和节点
4. onUpdated(()=>{}) --- 更新后，更新后的Dom节点可以访问了
5. onBeforeUnmounte(()=>{}) --- 销毁前，还可以访问数据 和 dom结构
6. onUnmounted(()=>{}) --- 销毁后，访问不到数据和dom节点了
   ps: 因为setup语法，一开始就已经可以访问到响应式数据了，所有没有创建前(beforeCreate) 和 创建后(created)的钩子函数了。

动态组件没有销毁前后的两个生命周期钩子函数，但是会多出两个显示和隐藏的生命周期钩子函数。

• onActivated(()=>{}) --- 显示，组件显示时触发
• onDeactivated(()=>{}) --- 隐藏，组件隐藏时触发

vue3的生命周期 和 vue2的生命周期执行顺序是一样。只不过没有了beforeCreate 和 created 这两个生命周期，它们被 setup 替换掉了，就是说 setup 等于 beforeCreat 和 created。
在 setup 中 直接就可以定义响应式数据。

父子组件阶段生命周期钩子函数执行顺序

创建阶段

1. 父组件创建前
2. 父组件创建后
3. 父组件挂载前
4. 子组件创建前
5. 子组件创建后
6. 子组件挂载前
7. 子组件挂载后
8. 父组件挂载后

更新阶段

1. 父组件更新前
2. 子组件更新前
3. 子组件更新后
4. 父组件更新后

销毁阶段

1. 父组件销毁前
2. 子组件销毁前
3. 子组件销毁后
4. 父组件销毁后