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