关于vue.js: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. 父组件销毁后