一文读懂vue3的生命周期

Vue3是最新版本的Vue框架，它引入了许多新的特性和改进，包括更好的TypeScript支持、Composition API、Teleport（以前称为Portals）等。本篇文章将重点介绍Vue3中的组件生命周期。

一、钩子函数的变化

在Vue3中，一些常见的钩子函数发生了变化。例如，vue2中的created和beforeCreate钩子函数被替换为了setup()，并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同，但是有所不同的是，在Vue3中，它们是使用ES6类定义的。

二、setup

setup 函数是一个全新的组件选项。它是 Composition API 的核心，用于初始化组件实例。

setup 函数接收两个参数：props 和 context。其中 props 是父组件传递给当前组件实例的属性，而 context 则包含了一些 helper 方法和组件选项（如 attrs、slots 和 emit 等）。

在 setup 中，我们可以使用 Vue 3 提供的多个工具函数来定义响应式数据、监听生命周期钩子、处理计算属性、声明事件处理函数等。这些函数包括：

• reactive：用于创建响应式对象
• ref：用于创建一个单一的响应式值
• computed：用于创建计算属性
• watch：用于监听响应式数据的变化
• onMounted、onUpdated 和 onUnmounted：用于监听生命周期钩子
• toRefs：用于将响应式对象转换为普通对象
• inject 和 provide：用于跨层级组件传递数据
• getCurrentInstance：用于访问当前组件实例

使用 setup 函数的优点是可以将相似的逻辑组织在一起，便于代码的维护和重用。此外，setup 函数需要返回一个对象，用于暴露组件状态和方法给模板使用，因此也提高了代码的可读性和组件的封装性。 例：

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

三、onBeforeMount 和 onMounted

onBeforeMount 和 onMounted 是 Vue 3 中的生命周期钩子，它们分别在组件挂载之前和之后运行。下面是两个钩子函数的使用方法：

onBeforeMount

onBeforeMount 钩子函数会在组件挂载到 DOM 前运行，可以用来在组件挂载前执行一些初始化操作。

<script setup>
import { onBeforeMount } from 'vue'
    onBeforeMount(() => {
      console.log('Before mount')
    })
</script>

在上面的例子中，我们通过 onBeforeMount 钩子注册了一个函数，在组件挂载前输出 'Before mount'。

onMounted

onMounted 钩子函数会在组件挂载到 DOM 后运行，通常用于获取数据和初始化页面状态等操作。

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

    const state = reactive({
      message: ''
    })

    onMounted(() => {
      // 发送 AJAX 请求，获取数据
      fetch('/api/data')
        .then(res => res.json())
        .then(data => {
          state.message = data.message
        })
    })
</script>

在上面的例子中，我们通过 onMounted 钩子在组件挂载后发送 AJAX 请求，获取数据并更新组件状态中的 message 字段。

需要注意的是，在 Vue 3 中，onMounted 和 onBeforeMount 钩子需要在 setup 函数中使用。

四、onBeforeUpdate和onUpdated

onBeforeUpdate 和 onUpdated 是 Vue 3 中的生命周期钩子函数，它们分别在组件更新之前和之后运行。下面是两个钩子函数的使用方法：

onBeforeUpdate

onBeforeUpdate 钩子函数会在数据重新渲染之前运行，可以用来在组件更新前执行一些操作。

<script setup>
import { onBeforeUpdate } from 'vue'
    let count = 1
    onBeforeUpdate(() => {
      console.log('Before update', count)
    })
    const handleClick = () => {
      count++
    }
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="handleClick">增加</button>
  </div>
</template>

在上面的例子中，我们通过 onBeforeUpdate 钩子注册了一个函数，在每次组件更新之前输出计数器的值。同时，在方法中添加了一个按钮点击事件，用于修改计数器的值。

onUpdated

onUpdated 钩子函数会在数据重新渲染后运行，通常用于更新 DOM、执行动画或获取最新的状态等操作。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">获取最新的消息</button>
  </div>
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue'
    const message = ref('Hello, world!')
    onMounted(() => {
      // 模拟异步获取消息
      setTimeout(() => {
        message.value = 'Hello, Vue 3!'
      }, 2000)
    })
    onUpdated(() => {
      console.log('DOM updated')
    })
    const handleClick = () => {
      alert(message.value)
    }
</script>

在上面的例子中，我们通过 onUpdated 钩子在每次数据更新后输出 DOM 更新消息。同时，在方法中添加了一个按钮点击事件，用于显示最新的消息。

需要注意的是，在 Vue 3 中，onBeforeUpdate 和 onUpdated 钩子需要在 setup 函数中使用。

五、onBeforeUnmount和onUnmounted

当组件不再需要时，Vue3将依次执行beforeUnmount和unmounted钩子函数。beforeUnmount钩子函数在组件卸载之前被调用，通常用于清理一些事件监听器或取消一些异步任务。unmounted钩子函数在组件完全被卸载后被调用，此时，组件可以回收内存等资源。

onBeforeUnmount

onBeforeUnmount 钩子函数会在组件卸载之前运行，可以用来清除定时器、取消事件监听器等操作。

<script setup>
import { onBeforeUnmount, ref } from 'vue'
    const timer = ref(null)
    onBeforeUnmount(() => {
      clearInterval(timer.value)
    })
    const startTimer = () => {
      timer.value = setInterval(() => {
        console.log('Hello, world!')
      }, 1000)
    }
    const stopTimer = () => {
      clearInterval(timer.value)
    }
</script>

<template>
  <div>
    <p>定时器示例</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

在上面的例子中，我们通过 onBeforeUnmount 钩子注册了一个函数，在组件卸载之前清除定时器。同时，在方法中添加了两个按钮事件，用于启动和停止计时器。

onUnmounted

onUnmounted 钩子函数会在组件卸载后运行，通常用于清理一些资源或取消订阅。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="unsubscribe">取消订阅</button>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
    const message = ref('')
    let subscription = null
    onMounted(() => {
      // 模拟创建一个订阅
      subscription = setInterval(() => {
        message.value = new Date().toLocaleTimeString()
      }, 1000)
    })
    onUnmounted(() => {
      // 在组件卸载后取消订阅
      clearInterval(subscription)
    })
    const unsubscribe = () => {
      clearInterval(subscription)
    }
</script>

在上面的例子中，我们通过 onUnmounted 钩子在组件卸载后清除订阅。同时，在方法中添加了一个按钮点击事件，用于取消订阅。

需要注意的是，在 Vue 3 中，onBeforeUnmount 和 onUnmounted 钩子需要在 setup 函数中使用。

六、总结

Vue3引入了Composition API、Teleport等新特性，同时也改进了组件生命周期的实现方式，包括钩子函数的命名和顺序的变化。通过了解Vue3中组件生命周期的变化，开发人员可以更好地管理组件的状态、数据以及DOM操作，从而提高Vue3应用程序的性能和可维护性。总之，Vue3中的组件生命周期是一个非常重要的概念。开发人员应该熟悉Vue3的生命周期钩子函数，以便更好地编写和维护Vue3应用程序。