Vue 3 生命周期和生命周期函数

Vue.js 是一个用于构建用户界面的渐进式框架。随着 Vue 3 的发布,它引入了许多新的功能和改进,包括更灵活和性能更高的生命周期管理。在这份文档中,我们将详细介绍 Vue 3 的生命周期和相关生命周期函数。

一、生命周期概述

Vue 实例在其生命周期内经过一系列的初始化步骤,例如设置数据观测、编译模板、挂载实例到 DOM 以及在数据变化时更新 DOM。通过生命周期钩子,我们可以在这些步骤中执行自定义的操作。

二、生命周期图示

三、生命周期函数

以下是 Vue 3 中常用的生命周期函数以及它们的调用时机:

  1. beforeCreate

    • 在实例初始化之后,数据观测 (data observer) 和事件配置 (event setup) 之前调用。
    • 此时,组件实例的属性如 datacomputedmethods 尚未初始化。
  2. created

    • 在实例创建完成后被立即调用。
    • 在这一步,实例已完成数据观测、属性和方法的初始化,但还没有开始模板编译、挂载 DOM。
  3. beforeMount

    • 在挂载开始之前被调用:相关的 render 函数首次被调用。
    • 此时,虚拟 DOM 已经创建并渲染为真实 DOM,但尚未插入文档中。
  4. mounted

    • 在挂载完成后被调用。
    • 组件已经被挂载,el 属性可以访问到真实 DOM 元素。
  5. beforeUpdate

    • 组件数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    • 你可以在这个钩子中进一步更改状态,这不会触发附加的重渲染过程。
  6. updated

    • 由于数据变化导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
    • 调用时,组件 DOM 已经更新。
  7. beforeUnmount

    • 在组件实例卸载之前调用。
    • 适用于清理工作,例如清楚定时器、取消订阅等。
  8. unmounted

    • 组件实例卸载后调用。
    • 实例已被销毁,所有的事件监听器被移除,所有的子实例也被销毁。

四、示例代码

下面是一个简单的 Vue 3 组件示例,展示了如何使用生命周期钩子:

javascript 复制代码
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

在这个示例中,每个生命周期钩子都会在其对应的阶段被调用,并在控制台输出一条消息。

五、总结

了解 Vue 3 的生命周期和生命周期函数是掌握 Vue 3 的关键一步。通过使用这些钩子函数,我们可以在组件的不同阶段执行特定的逻辑,从而更好地控制和管理组件的行为。

更多详细信息和更新内容,请参阅 Vue.js 官方文档

相关推荐
MediaTea5 分钟前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~6 分钟前
CSS——重排和重绘
前端
奶糖 肥晨13 分钟前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法26 分钟前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
belldeep1 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang1 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高0072 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
正义的大古2 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
Hashan2 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js