Vue生命周期都有哪些?

定义

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.mzph.cn/news/833004.shtml

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

相关文章

关于实体类注解@Data、@EqualsAndHashCode(callSuper = true)、@Accessors(chain = true)的作用

笔记&#xff1a;都是lombook插件的注解&#xff0c;作用是简化优化代码等&#xff0c;比如getter、setter&#xff0c;一般三者连用能避免一些如继承类的导致的一些坑&#xff0c;比如equal()方法的错误&#xff0c;具体用法可查阅每个注解及属性的作用。 Accessors(chain tr…

OpenAPI 4 版本推出后会带来怎样的行业变革?

随着数字化浪潮的来临&#xff0c;软件开发与应用程序接口&#xff08;API&#xff09;在现今社会的商业及技术领域变得至关重要。API如同不同软件和服务之间的纽带&#xff0c;它将数据的流动和多个系统的无缝对接变为可能&#xff0c;极大地促进了技术的快速进步与应用的广泛…

ubuntu20安装colmap

系统环境 ubuntu20 &#xff0c;cuda11.8 &#xff0c;也安装了anaconda。因为根据colmap的官方文档说的&#xff0c;如果根据apt-get安装的话&#xff0c;默认是非cuda版本的&#xff0c;而我觉得既然都安装了cuda11.8了&#xff0c;自然也要安装cuda版本的colmap。 安装步骤…

2022 年全国职业院校技能大赛高职组云计算赛项试卷(容器云)

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包…

Flutter开发Dart中的队列(Queue)

文章目录 Dart中的队列&#xff08;Queue&#xff09;基本操作示例队列的类型队列的应用总结 Dart中的队列&#xff08;Queue&#xff09; 队列是一种抽象的数据结构&#xff0c;遵循“先进先出”&#xff08;FIFO&#xff09;的原则。这意味着最早添加的元素将首先被移除。队…

76.网络游戏逆向分析与漏洞攻防-移动系统分析-分析角色移动产生的数据包

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

kubeadm搭建K8S集群小记

概述 一时兴起&#xff0c;尝试下K8S集群的搭建 步骤 请查看参考链接1 Q&A Q: raw.githubusercontent.com被墙&#xff0c;导致kube-flannel.yml下不来 kubectl apply -f https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.ymlTh…

【第6节课笔记】LagentAgentLego

Lagent 最中间部分的是LLM&#xff0c;即为大语言模型模块&#xff0c;他可以思考planning和调用什么action&#xff0c;再将其转发给动作执行器action executer执行。 支持的工具如下&#xff1a; Arxiv 搜索 Bing 地图 Google 学术搜索 Google 搜索 交互式 IPython 解释器 IP…

wpf 使用DragDrop 类进行拖拽和接收

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;DragDrop 类及其 DoDragDrop 方法用于实现拖放&#xff08;Drag and Drop&#xff09;功能。拖放是用户界面中常见的交互方式&#xff0c;允许用户通过鼠标&#xff08;或其他指针设备&#xff09;…

初识Vue-混入mixins(详解分发 Vue 组件中可复用功能)

目录 一、mixins混入介绍 概念 特点 功能 用法 应用 二、mixins混入语法 1.简单示例 2.选项合并 3.全局混入 4.混入对象选项&#xff1a; 5.注意事项&#xff1a; 三、mixins混入应用实例 1.身份验证逻辑混入 2.表单验证混入 3.全局工具函数混入 四、总结 一、m…

Java集合简介

单列集合 双列集合

PWN入门--栈溢出

PWN入门–栈溢出 栈概要 介于网上各种wp在栈溢出利用脚本方面浅入浅出&#xff0c;深入讲一下栈溢出利用时&#xff0c;地址如何计算&#xff0c;栈中垃圾数据如何填充&#xff0c;函数调用时 参数 在栈中的分布&#xff0c; 栈帧的生成&#xff0c;函数返回值ip在栈中的摆放…

【强化学习】公平性Actor-Critic算法

Bringing Fairness to Actor-Critic Reinforcement Learning for Network Utility Optimization 阅读笔记 Problem FormulationLearning AlgorithmLearning with Multiplicative-Adjusted RewardsSolving Fairness Utility Optimization Evaluations 在网络优化问题中&#xff…

若依前端-APP中使用数据字典

1 在main.js文件中注册有关字典的组件和相关的属性等&#xff0c;如下所示&#xff0c;有添加字典注解的地方 import Vue from vue import App from ./App import wx from weixin-js-sdk import store from ./store // store import plugins from ./plugins // plugins import…

日志traceId追踪

文章目录 背景MDC简介 背景 在定位问题时&#xff0c;我们希望通过grep traceIdxxx *.log快速的过滤出某次请求的所有日志。 MDC简介 SLF4J日志框架提供了一个MDC(Mapped Diagnostic Contexts)工具类&#xff0c; MDC可以帮我们记录追踪日志的功能&#xff0c;它支持 Log4J和…

了解外汇震荡类货币对特征与交易策略

外汇市场是全球最大的金融市场&#xff0c;每天的交易量超过6万亿美元。在这个市场上&#xff0c;货币对之间的价格变动反映了全球经济和政治动态。外汇货币对通常被分为三类&#xff1a;主要货币对、次要货币对和外来货币对。而在交易这些货币对时&#xff0c;市场表现通常分为…

适合小白使用的编译器(c语言和Java编译器专属篇)

本节课主要讲如何安装适合编程小白的编译器 废话不多说&#xff0c;我们现在开始 c/c篇 首先&#xff0c;进入edge浏览器&#xff0c;在搜索框输入visual studio &#xff0c;找到带我画圈的图标&#xff0c;点击downloads 找到community版&#xff08;社区版&#xff09;的下…

BFS Ekoparty 2022 -- Linux Kernel Exploitation Challenge

前言 昨天一个师傅给了我一道 linux kernel pwn 题目&#xff0c;然后我看了感觉非常有意思&#xff0c;题目也不算难&#xff08;在看了作者的提示下&#xff09;&#xff0c;所以就花时间做了做&#xff0c;在这里简单记录一下。这个题是 BFS Lab 2022 年的一道招聘题&#…

原型模式类图与代码

现要求实现一个能够自动生成求职简历的程序&#xff0c;简历的基本内容包括求职者的姓名、性别、年龄及工作经历。希望每份简历中的工作经历有所不同&#xff0c;并尽量减少程序中的重复代码。 采用原型模式(Prototype)来实现上述要求&#xff0c;得到如图 7.25 所示的类图。 原…

go Gin项目实战

Gin项目实战 Gin博客项目-项目架构Gin博客项目-集成gormGin博客项目-集成Bootstrap创建用户表单Gin 博客项目-实现控制器和路由Gin 博客项目-设计静态页面Gin 博客项目-用户注册Gin 博客项目-用户登录Gin 博客项目-集成markdown编辑器Gin 博客项目-创建博客模型和DAOGin 博客项…