vue 的生命周期函数

server/2024/11/25 8:10:09/

Vue 生命周期函数(生命周期钩子)是 Vue 实例从创建到销毁过程中,不同阶段所触发的特定函数。理解这些生命周期函数对于开发 Vue 应用至关重要,因为它们让你在不同的生命周期阶段执行代码,比如数据初始化、DOM 渲染完成、组件销毁等。

Vue 生命周期的 4 个主要阶段

  1. 创建阶段(Creation Phase)
  2. 挂载阶段(Mounting Phase)
  3. 更新阶段(Updating Phase)
  4. 销毁阶段(Unmounting Phase)

每个阶段有特定的生命周期函数,我们可以在这些函数中执行自定义操作。以下是常见的 Vue 生命周期函数:

1. 创建阶段(Creation Phase)

  • beforeCreate
    在 Vue 实例初始化之后,数据观测 (data) 和事件/侦听器 (events/watcher) 设置之前调用。此时无法访问 datacomputedmethods 等属性。

    • 使用场景:通常不常用,因为此时实例还未准备好。
  • created
    Vue 实例被创建后,datacomputedmethods 等已设置完成,但 DOM 还没有渲染。此时可以访问到数据和事件监听器,通常用来进行初始化操作(如异步请求数据)。

    • 使用场景:适合做数据请求、事件监听器的绑定等。

2. 挂载阶段(Mounting Phase)

  • beforeMount
    在挂载开始之前调用,相关的 render 函数首次被调用,但 DOM 元素还没有挂载。

    • 使用场景:通常不需要使用,除非需要做一些特定的挂载前操作。
  • mounted
    在挂载完成后调用,el 被新创建的 vm.$el 替代。此时所有的 datacomputed 已经绑定到 DOM,DOM 可以安全地访问了。

    • 使用场景:适合进行 DOM 操作、依赖于 DOM 的初始化等。

3. 更新阶段(Updating Phase)

  • beforeUpdate
    在数据更改之后,DOM 更新之前调用。此时你可以访问到旧的数据和 DOM,但新的数据和视图还未更新。

    • 使用场景:可以进行一些操作,计算新旧数据变化的差异,或准备更新前的逻辑。
  • updated
    在数据更新并且视图重新渲染之后调用。此时可以访问到更新后的 DOM。

    • 使用场景:适合进行视图更新后的操作,避免直接修改数据,因为此时数据已经更新。

4. 销毁阶段(Unmounting Phase)

  • beforeDestroy
    在实例销毁之前调用。在这时,实例仍然是完全可用的,但组件的所有事件监听器、子组件实例等还未销毁。

    • 使用场景:适合清理定时器、取消网络请求、移除事件监听等操作。
  • destroyed
    实例销毁后调用。此时,所有的事件监听器和子组件的实例都被销毁。

    • 使用场景:适合进行销毁后的清理工作。

生命周期示意图

beforeCreate   -->   created   -->   beforeMount   -->   mounted   -->   beforeUpdate   -->   updated   -->   beforeDestroy   -->   destroyed

每个生命周期钩子的作用

生命周期钩子说明使用场景
beforeCreate实例初始化时调用,数据观测、事件监听器未设置初始化设置,初始化数据不完全时不常用。
created实例创建后调用,可以访问 datamethods,但未挂载到 DOM数据请求、初始化逻辑、订阅事件等。
beforeMount在挂载开始之前调用,el 未插入 DOM通常不需要使用,除非需要在挂载前做准备工作。
mounted挂载完成后调用,DOM 渲染完成,可以进行 DOM 操作访问 DOM 进行 DOM 操作,数据绑定完成。
beforeUpdate数据更新前调用,DOM 更新前更新前的数据和视图比较,准备更新的操作。
updated数据更新后调用,DOM 渲染后数据更新后的 DOM 操作,避免直接修改数据。
beforeDestroy实例销毁前调用,销毁前仍可访问实例。清理定时器、网络请求、事件监听等资源。
destroyed实例销毁后调用,销毁时实例的所有事件监听器和子组件实例也销毁。销毁后清理工作,如移除事件监听器等。

总结

Vue 的生命周期函数可以帮助开发者在组件的不同阶段执行特定的逻辑,保证在正确的时间做合适的事情。常用的生命周期函数包括 createdmountedupdateddestroyed,它们提供了对数据变化、DOM 操作和组件销毁时的控制能力。

理解并善用这些生命周期钩子,可以让你在开发过程中更加高效、灵活地处理组件的状态和行为。


http://www.ppmy.cn/server/144743.html

相关文章

深度强化学习(RL)介绍

深度强化学习(RL)介绍 写到了一半,图待后补 一、强化学习概述 (一)与监督学习对比及定义 强化学习不同于监督学习,在一些任务中数据标注困难,但机器可通过环境反馈知道结果好坏。强化学习是机…

【C++笔记】数据结构进阶之二叉搜索树(BSTree)

【C笔记】数据结构进阶之二叉搜索树(BSTree) 🔥个人主页:大白的编程日记 🔥专栏:C笔记 文章目录 【C笔记】数据结构进阶之二叉搜索树(BSTree)前言一.二叉搜索树的概念二.二叉搜索树的性能分析三.二叉搜索树的实现3.1二叉树的中序…

删除maven仓库中的失败文件

删除maven仓库中的失败文件 创建一个 删除maven仓库中的失败文件.bit 文件,将下面内容复制进去就行 @echo off rem create by sunhao(sunhao.java@gmail.com) rem crazy coderrem 这里写你的仓库路径 set REPOSITORY_PATH=C:\Users\Administrator\.m2\repository rem 正在搜索.…

嵌入式硬件电子电路设计(五)MOS管详解(NMOS、PMOS、三极管跟mos管的区别)

引言:在我们的日常使用中,MOS就是个纯粹的电子开关,虽然MOS管也有放大作用,但是几乎用不到,只用它的开关作用,一般的电机驱动,开关电源,逆变器等大功率设备,全部使用MOS管…

【第三章】Python基础字节序列之编码、解码,ASCII与初始化

字节序列 Python3 引入两个新的类型bytes、bytearray。 bytes不可变字节序列;bytearray是可变字节数组。 编码与解码 编码:str > bytes,将字符串这个字符序列使用指定字符集encode编码为一个个字节组成的序列 bytes, str是python中使用…

哪个牌子猫用空气净化器好?质量好的猫用空气净化器推荐

哪个牌子猫用宠物空气净化器好?冬天一关窗户就家里下起了猫毛雨,谁叫我养了只掉毛猫,真是无法呼吸。养猫人真的太不容易了。后面我男朋友挑了好久,终于挑到一款实用的养猫家电好物。这回真不是智商税,过敏皮炎患者&…

el-table :span-method 合并单元格(2.0)

2024.11.23今天我学习了如何使用el-table组件的合并单元格方法&#xff0c;效果如下&#xff1a; 代码如下&#xff1a; <template><div class"container"><el-table :data"table_data" :span-method"object_merge" border>&…

分布式数据库中间件可以用在哪些场景呢

在数字化转型的浪潮中&#xff0c;企业面临着海量数据的存储、管理和分析挑战。华为云分布式数据库中间件&#xff08;DDM&#xff09;作为一款高效的数据管理解决方案&#xff0c;致力于帮助企业在多个场景中实现数据的高效管理和应用&#xff0c;提升业务效率和用户体验。九河…