Vue的生命周期函数有哪些?

       Vue的生命周期函数是指Vue实例从创建到销毁的过程中,会调用的一系列特殊函数,这些函数允许开发者在Vue的不同阶段执行特定的代码。Vue 2.x和Vue 3.x的生命周期函数有所差异,但总体思路是一致的。以下是Vue生命周期函数的主要分类和具体函数(以Vue 3.x为例,因为Vue 3.x是当前的最新版本):

Vue 3.x 生命周期函数
1. 创建阶段

  • beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。此时无法访问组件的data、computed、methods等属性。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

2. 挂载阶段

  • beforeMount(在Options API中)/ onBeforeMount(在Composition API中):在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
  • mounted(在Options API中)/ onMounted(在Composition API中):el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。

3. 更新阶段

  • beforeUpdate(在Options API中)/ onBeforeUpdate(在Composition API中):数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  • updated(在Options API中)/ onUpdated(在Composition API中):由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

4. 销毁阶段

  • beforeUnmount(在Composition API中,Vue 3新增):在卸载组件实例之前调用。在这个阶段,实例仍然是完全活动的,所有的数据观测器、计算属性和 watch/event 事件监听器都仍然有效。
  • unmounted(在Options API中)/ onUnmounted(在Composition API中):Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也都会被销毁。

注意事项
       在Vue 3中,由于引入了Composition API,一些传统的Options API中的生命周期函数被替换成了新的命名方式(如beforeMount变为onBeforeMount),但Options API仍然被支持。
        生命周期函数允许开发者在Vue的不同阶段执行代码,但应避免在更新钩子(beforeUpdate和updated)中执行异步操作或修改状态,因为这可能导致无限更新循环。
         销毁钩子(beforeUnmount和unmounted)是清理资源(如定时器、事件监听器等)的好地方,以避免内存泄漏。


以上信息基于Vue 3.x的官方文档和社区最佳实践。对于Vue 2.x的用户,虽然大部分生命周期函数名称相同,但请注意Vue 2.x中没有onBeforeMount、onMounted、onBeforeUpdate、onUpdated、beforeUnmount和onUnmounted这些Composition API特有的生命周期函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/7780.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【新闻文本分类识别】Python+CNN卷积神经网络算法+深度学习+人工智能+机器学习+文本处理

一、介绍 文本分类识别系统。本系统使用Python作为主要开发语言,首先收集了10种中文文本数据集(“体育类”, “财经类”, “房产类”, “家居类”, “教育类”, “科技类”, “时尚类”, “时政类”, “游戏类”, “娱乐类”),然…

数据结构 ——— 链式二叉树的前中后序遍历递归实现

目录 前言 链式二叉树示意图​编辑 手搓一个链式二叉树 链式二叉树的前序遍历 链式二叉树的中序遍历 链式二叉树的后序遍历 前言 在上一章学习了链式二叉树的前中后序遍历的解析 数据结构 ——— 链式二叉树的前中后序遍历解析-CSDN博客 接下来要学习的是代码实现链式…

<项目代码>YOLOv8 pcb板缺陷检测<目标检测>

YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…

yarn报错`warning ..\..\package.json: No license field`:已解决

出现这个报错有两个原因 1、项目中没有配置许可证 在项目根目录package.json添加 {"name": "next-starter","version": "1.0.0",# 添加这一行"license": "MIT", }或者配置私有防止发布到外部仓库 {"priv…

大模型学习笔记------CLIP模型解读与思考

大模型学习笔记------CLIP模型详解 1、为什么提出CLIP模型2、CLIP模型详解3、CLIP模型的意义4、一些思考 上文说到,多模态大模型应该是非常有发展前景的,首先来学习 CLIP(Contrastive Language-Image Pretraining)这个多模态模型…

昇思25天学习打卡营第1天|快速入门

昇思25天学习打卡营第1天|快速入门 目录 昇思25天学习打卡营第1天|快速入门实操教程 一、MindSpore内容简介 主要特点: MindSpore的组成部分: 二、入门实操步骤 1. 安装必要的依赖包 2. 下载并处理数据集 3. 构建网络模型 4. 训练模型 5. 测试…

【Python TensorFlow】入门到精通

TensorFlow 是一个开源的机器学习框架,由 Google 开发,广泛应用于机器学习和深度学习领域。本篇将详细介绍 TensorFlow 的基础知识,并通过一系列示例来帮助读者从入门到精通 TensorFlow 的使用。 1. TensorFlow 简介 1.1 什么是 TensorFlow…

Python 学习完基础语法知识后,如何进一步提高?

入门Python后,就可以拿些小案例练手了,这时候千万不要傻乎乎地成天啃语法书。 编程是一门实践的手艺,讲究孰能生巧。不管是去手撸算法、或者照葫芦画瓢写几个小游戏都可以让你的Python突飞猛进。 之前看github比较多,推荐给大家…

Java:数据结构-再谈String类

字符串常量池 首先我们来思考这段代码,为什么运行结果一个是true,一个是false呢? public class Test {public static void main(String[] args) {String s1"123";String s2"123";String s3new String("555")…

书生第四期实训营基础岛——L1G2000 玩转书生「多模态对话」与「AI搜索」产品

基础任务 MindSearch使用示例 书生浦语使用示例 书生万象使用示例 进阶任务 问题:目前生成式AI在学术和工业界有什么最新进展? 回答截图: 知乎回答链接:目前生成式AI在学术和工业界有什么最新进展?

ReactPress:重塑内容管理的未来

ReactPress Github项目地址:https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议,欢迎一起共建,感谢Star。 ReactPress:重塑内容管理的未来 在当今信息爆炸的时代,一个高效、易用的内容管理系统&#xff0…

短视频矩阵系统源码/抖去推源头技术4年开发

#短视频矩阵系统# #短视频矩阵系统源码# #短视频矩阵系统源码开发# #短视频矩阵系统源头技术开发# 抖音短视频矩阵系统集成开发是指利用抖音平台的开放接口和API,构建一个系统,该系统能够管理多个抖音矩阵账号,实现内容的统一发布、账号管理、…

CJ/T188-2004 报文举例

CJ/T188-2004 报文举例 # 读水表地址 # 请求报文: FE FE FE FE 68 AA AA AA AA AA AA AA AA 03 03 81 0A 00 49 16FE FE FE FE :前导字符 FE68 :起始字符AA :仪表类型AA AA AA AA AA AA AA :仪表地址(当…

JavaEE进阶---第一个SprintBoot项目创建过程我的感受

文章目录 1.我的创建感受2.环境配置说明2.1xml文件国内源2.2配置流程 3.创建项目4.项目创建说明5.第一个程序--helloworld 1.我的创建感受 今天是学习这个spring boot项目创建的一天,这个确实过程坎坷,于是我自己决定弄一个这个IDEA的 专业版本&#xf…

7.1、实验一:RIPv1配置

一、源文件 7.1、实验一:RIPv1配置: https://url02.ctfile.com/d/61945102-63657205-d343fe?p2707 (访问密码: 2707) 二、实验目的 学会配置RIPv1路由 查看和调试RIPv1路由协议相关信息 三、实验要求 1.拓扑图 2. 四、开始实验 1.配置ip 配置R1 配置R2 配置…

【ARM Linux 系统稳定性分析入门及渐进 1.3 -- Crash工具编译过程】

文章目录 Build Procedure安装二进制 RPM从源代码重建构建过程从 tar 映像构建ARM 平台 Crash 工具安装从源 RPM 构建Build Procedure 从 RHEL3 版本开始,如果在系统安装时选择了开发工具包集(Development Tools),crash 工具会自动安装。然而,对于其他内核版本,或者如果…

【2023工业图像异常检测文献】GRAD: 基于异常生成和重权密集对比模式的异常检测方法

Generating and Reweighting Dense Contrastive Patterns for Unsupervised Anomaly Detection 1、Background 图像异常检测在各个领域扮演着至关重要的角色,包括工业产品缺陷检测、医学图像病变检测、使用X光图像的安全检查以及视频监控。 然而,由于无…

计算机毕业设计Hadoop+Spark大模型微博情感分析 微博舆情分析 微博爬虫 微博可视化 微博大数据分析 微博大数据 大数据毕业设计 Hive数据仓库

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

原型设计软件Axure RP 11 现已发布,更快、更实用的原型设计丨附下载

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。Axure RP 11(下载试用) 现已发布,更快、更实用的原…

数据结构-IndexTree结构解析(一)

1.IndexTree IndexTree解决的问题是什么呢?可以从求前缀和入手这个问题。 1.1前缀和数组 简单封装一个前缀和数组: package com.xinghai.arr;import java.util.Arrays;/*** 前缀和数组*/ public class PrefixSumArr {// 存储前缀和数据private int[] p…