# 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 的声明周期钩子映射关系是这样的：

Vue2 生命周期钩子	Vue3 生命周期钩子
beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

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 操作，可以清楚的看到页面数据更新后钩子的执行情况，然后有两个页面切换，可以看到页面注销时候钩子执行情况。
在这里插入图片描述
刷新页面，查看钩子执行顺序。