掌握 Vue 3 生命周期：让你的应用“活”起来的秘密武器！

经常见
372 阅读4分钟

在前端开发的世界里，Vue.js 一直以其简洁和灵活性著称。而 Vue 3 的发布更是带来了许多令人兴奋的新特性，其中就包括对生命周期钩子的改进。如果你想要写出性能更优、代码更清晰的应用程序，那么理解并善用这些生命周期钩子是必不可少的。本文将带你一步步探索 Vue 3 组件的生命历程，揭示如何让它们在各个阶段都表现得恰到好处。

一、什么是生命周期？

想象一下，一个 Vue 组件就像是一个人的一生——它有出生（创建）、成长（更新）和死亡（销毁）。在这个过程中，Vue 提供了一系列特定的时间点或事件，称为“生命周期钩子”，允许开发者在这些关键时刻执行特定的操作。通过合理利用这些钩子，我们可以确保应用始终处于最佳状态，并且能够响应各种变化。

二、Vue 3 生命周期的主要阶段

1. 创建阶段

  • onBeforeCreate 和 onCreated：

    • 在 Vue 2 中常见的这两个钩子，在 Vue 3 中被合并进了 setup() 函数。这意味着你可以在 setup() 内直接处理组件创建时的逻辑，无需单独定义这两个钩子。

2. 挂载阶段

  • onBeforeMount：

    • 在挂载开始之前被调用，此时模板已经被编译，但尚未渲染到 DOM 中。这是进行一些预加载操作的好时机，比如提前获取数据或者设置初始状态。

  • onMounted：

    • 组件完成首次渲染后调用，此时可以安全地操作DOM元素。这是一个非常重要的钩子，常用于初始化第三方库、添加事件监听器等。

3. 更新阶段

  • onBeforeUpdate：

    • 数据更新时，在虚拟 DOM 打补丁之前调用。这里适合做一些需要在视图更新前完成的工作，例如取消不必要的请求或重置某些变量。

  • onUpdated：

    • 组件重新渲染完毕后调用，可以在此处处理视图更新后的逻辑，如动画效果或者日志记录。

4. 卸载阶段

  • onBeforeUnmount：

    • 卸载组件实例前调用，通常用于清理定时器、取消网络请求等资源释放工作。这一步骤至关重要，因为它能有效防止内存泄漏问题。

  • onUnmounted：

    • 组件实例被完全卸载后调用，可用于记录日志或其他收尾工作。这也是最后的机会来确认所有资源都已经正确释放。

4. 错误处理

  • onErrorCaptured：

    • 捕获来自后代组件的错误时调用，可用于集中管理异常情况。这个钩子可以帮助我们构建更加健壮的应用，及时发现并解决问题。

5. 其他辅助钩子

  • onRenderTracked 和 onRenderTriggered：

    • 这两个新添加的钩子可以帮助我们调试响应式依赖关系，虽然不常用，但在某些情况下非常有用。例如，当你的组件行为不符合预期时，可以通过这些钩子来追踪哪些属性触发了重新渲染。

三、实战演练：如何运用生命周期钩子

了解了理论知识后，接下来让我们看看实际场景中的应用吧！假设我们要实现一个简单的计数器组件，它可以增加数值并在页面上显示当前值。为了确保这个组件在不同状态下都能正常工作，我们将使用以下几种生命周期钩子：

<template>
    <div class="person">
      <h2>当前求和为：{{ sum }}</h2>
      <button @click="changeSum">点我sum+1</button>
    </div>
  </template>
  
  <!-- vue3写法 -->
  <script lang="ts" setup name="Person">
    import { 
      ref, 
      onBeforeMount, 
      onMounted, 
      onBeforeUpdate, 
      onUpdated, 
      onBeforeUnmount, 
      onUnmounted 
    } from 'vue'
  
    // 数据
    let sum = ref(0)
    // 方法
    function changeSum() {
      sum.value += 1
    }
    console.log('setup')
    // 生命周期钩子
    onBeforeMount(()=>{
      console.log('挂载之前')
    })
    onMounted(()=>{
      console.log('挂载完毕')
    })
    onBeforeUpdate(()=>{
      console.log('更新之前')
    })
    onUpdated(()=>{
      console.log('更新完毕')
    })
    onBeforeUnmount(()=>{
      console.log('卸载之前')
    })
    onUnmounted(()=>{
      console.log('卸载完毕')
    })
  </script>

<template>
    <div>
        <LifeCycleComponent v-if="isShow"/>
        <button @click="isShow = !isShow">卸载</button>
    </div>
</template>

<script setup>
    import LifeCycleComponent from './components/LifeCycleComponent.vue'
    import { ref } from 'vue'
    const isShow = ref(true)
    
</script>

<style scoped>

</style>

screenshots.gif

四、总结

  • 规律：

    生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

  • Vue2的生命周期

    创建阶段：beforeCreate、created

    挂载阶段：beforeMount、mounted

    更新阶段：beforeUpdate、updated

    销毁阶段：beforeDestroy、destroyed

  • Vue3的生命周期

    创建阶段：setup

    挂载阶段：onBeforeMount、onMounted

    更新阶段：onBeforeUpdate、onUpdated

    卸载阶段：onBeforeUnmount、onUnmounted

  • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

avatar
文章
阅读
粉丝