Vue生命周期都有哪些?

news2025/2/24 23:13:34

定义

Vue的生命周期就是实例从创建销毁的一个过程,即从创建、初始化数据、编译模板、挂载Dom($el)->渲染、更新->渲染,卸载等一系列的过程。el是挂载点如<div id="app"></div>。

Vue的生命周期分为八个阶段

1.beforeCreate(实例创建前)

Vue实例开始初始化事件和生命周期函数,data为空,el为空。(可加loading效果)。

2.created(实例创建后)

Vue实例已创建好,事件配置完毕。data有值,el为空。(结束loading效果,可发请求获取数据)。

3.beforeMount(挂载前)

首次调用render函数,编译模板把data数据和模版生成html,但html未挂载。data有值,el有值。

4.mounted(挂载后)

把编译好的html(vm.$el)替换el属性指向的dom对象,渲染完成。

5.beforeUpdate(更新前)

当数据发生改变和视图更新之前,新数据和旧视图未同步。

6.updated(更新后)

虚拟dom重新渲染结束,视图更新完成。可操作更新后的dom。

7.beforeDestroy(销毁前)

将要销毁组件,此时Vue实例仍然可用。

8.destroyed(销毁后)

Vue实例所有的指令都解除绑定,然后销毁组件和移除事件监听器。

完整的父子生命周期

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

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

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

相关文章

C++-10

1.C一个程序&#xff0c;实现两个类&#xff0c;分别存放输入的字符串中的数字和字母&#xff0c;并按各自的顺序排列&#xff0c; 类中实现-一个dump函数&#xff0c;调C用后输出类中当前存放的字符串结果。 例如&#xff0c;输入1u4y2a3d,输出:存放字母的类&#xff0c;输出a…

Oracle21C判断[点]是否在[多边形]内

环境 Oracle Database 21c Express Edition Release 21.0.0.0.0OracleSpatial函数 SELECT sdo_inside( sdo_geometry( 2001, NULL, SDO_POINT_TYPE(118.439140, 31.385456, NULL), NULL, NULL ), SDO_GEOMETRY( 2003, NULL, NULL, sdo_elem_info_array(1, 2003, 2), SDO_ORDI…

conda env list找不到anaconda/envs下的环境。Could not find conda environment。

home/用户名/anaconda3/envs中的环境与conda env list下显示的环境不一致。 想进入home/用户名/anaconda3/envs中的环境&#xff0c;显示环境不存在。 重点&#xff01;&#xff01;&#xff01;&#xff08;conda activate 环境地址 可进入环境&#xff09; 这一步最重要&…

一种基于YOLOv8改进的高精度红外小目标检测算法 (原创自研)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;一种基于YOLOv8改进的高精度小目标检测算法&#xff0c; 在红外小目标检测任务中实现暴力涨点&#xff1b; &#x1f4a1;&#x1f4a1;&#x1f4a1;创新点&#xff1a; 1&#xff09;SPD-Conv特别是在处理低分…

IT外包的可扩展性及其如何推动业务增长

在当前数字化的时代&#xff0c;企业的发展与其IT战略的有效性息息相关。随着市场需求和技术的不断变化&#xff0c;企业需要灵活和可扩展的IT解决方案以适应不断变化的环境。IT外包作为一种智慧选择&#xff0c;为企业提供了卓越的可扩展性&#xff0c;从而推动了业务的增长。…

Leetcode-轮转数字

189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/rotate-array/ 目录 189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/rotate-array/ 题目 解题 第一种方法 第二种方法 题目 给定一个整数数组 …

如何把为知笔记导入到Notion笔记里面

&#x1f4a1; 大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、读书和自媒体。 为知笔记并不开放&#xff0c;笔记文件只能以pdf或者图片的方向导出来&#xff0c;无法与其他笔记文件相互导入导出&#xff0c;然而&#xff0c;稍…

如何测试响应式网站

我们每天通过多种设备访问互联网。移动电话&#xff0c;台式机/笔记本电脑&#xff0c;平板电脑&#xff0c;平板电脑…我们所掌握的设备数量已经增长为天文数字。作为消费者&#xff0c;体验很棒。我们可以随时随地在任何设备上自由访问互联网。但对于Web开发人员&#xff0c;…

stable diffusion controlnet前处理中的图像resize

在SD controlnet应用中&#xff0c;一般都要先安装controlnet_aux&#xff0c;并在项目代码中import相关前处理模块&#xff0c;如下所示。 在对control image进行前处理&#xff08;比如找边缘&#xff0c;人体特征点&#xff09;之前&#xff0c;往往会图像进行resize&#x…

Ollama配置webui连接大预言模型

Ollama配置Web UI连接大预言模型 默认ollama安装后&#xff0c;chat对话只有命令行界面&#xff0c;交互体验较差。借助open-webui可以通过web界面连接ollama&#xff0c;从而实现类似chatgpt式的web交互体验。 使用家用PC实践记录如下&#xff1a; 1. 环境配置 本次使用的操作…

python学习笔记----数据容器(六)

一、数据容器的入门 python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素。每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 数据容器根据特点的不同&#xff0c;如&#xff1a; 是否…

JAVA自定义日期选择器

下载jar地址&#xff0c; https://toedter.com/jcalendar/ jar包下载地址 依赖包如下图所示&#xff1a; 整个项目代码已经上传到CSDN https://download.csdn.net/download/qq_30273575/89241601?ydrefereraHR0cHM6Ly9tcC5jc2RuLm5ldC9tcF9kb3dubG9hZC9tYW5hZ2UvZG93bmxvYWQ…

由异常的测试眼图引发的深入思考

最近的信号测试中&#xff0c;出现了“双眼皮”的眼图测试效果&#xff0c;直觉告诉我&#xff0c;这肯定是有问题的&#xff0c;于是&#xff0c;脑海中就出现了很多的场景假设&#xff0c;并将可能的导致因素总结如下&#xff1a; 1. PCB通道阻抗设计不匹配&#xff0c;负载端…

Windows 本地直接使用 SSH,SFTP 以及 SFTP下载文件到 Windows/mac 本地或上传(没有客户端时)

windows 本地打开 ssh 以及 sftp 等的方式 1.win(windows图标那个键) r 直接搜 然后从打开的位置运行 如果是打开 sftp 前面的 ssh 换一下成sftp 就行 直接从地址栏输入也可以直接转过去 通过 windows 的工具直接访问 sftp 后将文件下载到自己的windows 或 mac 上 先通过…

Pandas 2.2 中文官方教程和指南(二十五·一)

原文&#xff1a;pandas.pydata.org/docs/ 食谱 原文&#xff1a;pandas.pydata.org/docs/user_guide/cookbook.html 这是一个简短而精炼的示例和链接存储库&#xff0c;包含有用的 pandas 示例。我们鼓励用户为此文档添加内容。 在这一部分添加有趣的链接和/或内联示例是一个…

《Spring-MVC》系列文章目录

简介 Spring MVC是一种基于Java的实现MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;它通过把Model&#xff08;模型&#xff09;、View&#xff08;视图&#xff09;、Controller&#xff08;控制器&#xff09;分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂…

计算机视觉大项目(1)-水果分级系统

项目来源&#xff1a;河北大学计算机视觉课程-杨老师. 一共有四个标题&#xff0c;本篇博客只完成前两问。 目录 实验目的: 实验内容&#xff1a; 实验步骤&#xff1a; 1.水果图像的分割 >掩膜图像Mask 是什么&#xff1f; >改进:去除反光部分的影响 2&#xf…

打造智能化且用户体验上乘的企业展馆需关注哪些细节?

随着科技的进步&#xff0c;传统展馆的设计理念和展陈方式已逐渐暴露出不足&#xff0c;为了让企业展馆在新时代焕发出更加璀璨的光彩&#xff0c;我们亟待在展馆的创新设计、智能化展示以及人性化布局等多个层面进行深入探索。那么&#xff0c;究竟需要精心打磨哪些细节&#…

【网站项目】家庭理财系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

(css)鼠标移出样式不变

(css)鼠标移出样式不变 需求&#xff1a;列表鼠标移入切换样式&#xff0c;移出保持不变 <divv-for"(item, index) of newsList":key"index"class"news-list":class"{active : change index}"tabindex"1"mouseenter&quo…