# Vue3 生命周期

Vue3 生命周期

先说点啥哈，我之前学习过 Vue2，但是呢，Vue3 也发布不少时间了，尽管现在大部分公司还是在使用 Vue2 做开发，但是 Vue 之父尤雨溪曾经说过，Vue3 是未来的趋势，建议初学者直接学习 Vue3，但是现在 Vue3 尽管发布，但是有些地方还在维护更新，难免会出现一些小的问题，所以说大部分开发还是以 Vue2 为主，但是不影响爱好者提前接触了解一下。

简介

首先一点呢， Vue2 和 Vue3 中的生命周期钩子的工作方式基本上是一致的，而且如果项目中使用的选项API，基本上不需要更改什么代码， 因为 Vue3 是向下兼容的，如果是使用 Vue3 的组合式 API，那么使用的方式是有些许的不同，毕竟组合式 API 在大的 Vue 项目中还是比较吃香的。

生命周期钩子

在 Vue2 里面，生命周期钩子主要有 8 个，分别是：

• beforeCreate—— 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。
• created—— 在实例创建完成后被立即同步调用。
• beforeMount—— 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted—— 在实例挂载完成后被调用。
• beforeUpdate—— 在数据发生改变后，DOM 被更新之前被调用。
• updated—— 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
• beforeDestroy—— vue实例销毁之前调用。
• destroyed—— vue实例销毁之后调用。

除了上面的 8 个之外，还有两个分别是 activated 和 deactivated。分别用来组件激活时回调和组件停用时回调。但是 activated 函数必须在组件被 keep-alive 标签包裹时可触发，否则无效。

上边说过，Vue3 在生命周期钩子这部分是可以实现向下兼容的，所以说我们在 Vue3 项目中，是可以直接使用 Vue2 项目中生命周期钩子的使用方法。

<script>
  export default {
    setup() {
    },
    beforeCreate() {
      console.log('**beforeCreate**  ——  在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。')
    },
    created() {
      console.log('**created**  ——   在实例创建完成后被立即同步调用。')
    },
    beforeMount() {
      console.log('**beforeMount**  ——  在挂载开始之前被调用：相关的 render 函数首次被调用。')
    },
    mounted() {
      console.log('**mounted**  —— 在实例挂载完成后被调用。')
    },
  }
</script>

通过上面 Vue2 的代码写法，在 Vue3 中是可以正常执行的，其他钩子也是OK的，就不写了。

Vue2 生命周期钩子更新到 Vue3

将 Vue2 更新到 Vue3 的声明周期钩子映射关系是这样的：

Vue3 使用生命周期

首先可以说一点哈，就是 3 版本的声明周期钩子不存在 created 钩子，因为他被 setup 取代了，所以说可以理解成 setup 就是 created 钩子。

然后写法上面与 2 版本也有所不同，3 版本的生命周期钩子要写在 setup 函数里面，且不能使用 2 版本的语法，需要使用箭头函数的方式进行编写。

例如写一个 onMounted 生命周期钩子：

<script>
import { onMounted } from 'vue'  // 首先需要通过组合式API的方式把声明周期钩子引入项目

  export default {
    setup() {
      onMounted(() => {   // 在 setup 函数中，使用箭头函数的方式使用。
        console.log('onMounted')
      })
    },
  }
</script>

刷新页面，就可以看到钩子执行了。

Vue3 生命周期执行顺序

3 版本的生命周期钩子执行顺序和 2 版本的完全一样，学过 2 版本的可以直接跳过这一部分。

看钩子的执行顺序，我们可以直接写一下执行看看，比如说下面这套 demo。

<template>
  <div>
    <h1>我是𝒆𝒅.</h1>
    <h1>num : {{num}}</h1>
    <el-button type="primary" @click="num++">num++</el-button>
  </div>
</template>
<script>
  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, ref } from 'vue'

  export default {
    setup() {

      const num = ref(0)

      onBeforeMount(() => {
        console.log('onBeforeMount')
      })

      onMounted(() => {
        console.log('onMounted')
      })

      onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
      })

      onUpdated(() => {
        console.log('onUpdated')
      })

      onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
      })

      onUnmounted(() => {
        console.log('onUnmounted')
      })

      onErrorCaptured(() => {
        console.log('onErrorCaptured')
      })

      console.log('setup执行了')

      return { num }
    },
  }
</script>
<style scoped>

</style>

主要是有一个按钮，点击按钮的话 num 实现加 1 操作，可以清楚的看到页面数据更新后钩子的执行情况，然后有两个页面切换，可以看到页面注销时候钩子执行情况。

刷新页面，查看钩子执行顺序。

注意一点，就是我们打印的 ​​setup执行了​​ 放在了钩子函数的最后面，但是加载页面的时候，他也是首先执行的，所以说呢，钩子函数不是现在前面，就一定先执行的。

onBeforeUpdate 和 onUpdate 这两个暂时没有执行，是因为他们就是在页面更新的时候才会触发回调，页面编写按钮的目的就是来测试两个回调的执行情况。

我们点击按钮，是实现 num + 1 操作：

页面注销，钩子的回调情况。当我们切换页面，钩子检测的代码是写在 home 页面的，所以说切换到 about 页面之后，就会触发注销钩子。

父子组件嵌套钩子执行情况

这个地方，还是，写一下看看就可以了，我们写一个子组件，在刚写的组件中引入，然后也写好各个钩子，打印钩子内容，就是下面这个效果。

然后，刷新页面，，看一下初始化过程中钩子是怎么执行的。

然后我们点击按钮，隐藏子组件。

然后切换页面，直接全部注销掉，钩子的执行顺序：

如果只更新子组件的数据，子组件自身内部页面改变父组件不更新。

完成！

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​