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,一经查实,立即删除!

相关文章

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;抄着抄着就能懂了 内容…

【第6节课笔记】LagentAgentLego

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

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…

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

外汇市场是全球最大的金融市场&#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 所示的类图。 原…

FME学习之旅---day26

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 【由于上周&#xff0c;上班状态不是很好&#xff0c;事情多又杂&#xff0c;没有学习的劲头&#xff0c;就短暂的休息了一下下。双休爬山&#xff0c;给自己上了强度&#xff0c;今天才缓过来…

品高虚拟化后端存储的发展演进

在品高虚拟化技术不断发展的过程中&#xff0c;虚拟化的后端存储一直是关注的焦点之一。 本文将从最初的文件存储和NFS开始&#xff0c;追溯到集中式存储SAN&#xff0c;然后选择了Ceph的RBD方式&#xff0c;并最终抵达选择支持vhost协议的后端存储的现状&#xff0c;我们将探…

Android 桌面小组件 AppWidgetProvider

Android 桌面小组件 AppWidgetProvider 简介 小组件就是可以添加到手机桌面的窗口。点击窗口可以进入应用或者进入应用的某一个页面。 widget 组件 如需创建 widget&#xff0c;您需要以下基本组件&#xff1a; AppWidgetProviderInfo 对象 描述 widget 的元数据&#xff0…

一键式手机文件传输,让你生活更便捷!

随着手机功能不断增强&#xff0c;我们经常需要在不同设备之间传输文件&#xff0c;如照片、音乐、视频、文档等。不过&#xff0c;现在有许多应用程序和技术可以帮助我们实现手机文件传输的便捷和快速。本文将介绍2类让手机文件传输一键完成的方法&#xff0c;让你的生活更加便…

redis 使用记录

redis 使用记录 下载运行配置文件启动 参考 下载 github: Redis for Windows 或者从百度网盘下载 Redis version 3.2.100 链接: https://pan.baidu.com/s/1kxNOuZFunvVhVy1cfQzCDA?pwdpibh 运行 双击运行 运行效果 如果出错&#xff1a;查看是否项目路径是否包含中文 配…

如何用virtualbox 来跑openwrt 镜像?

1.下载好openwrt源代吗&#xff0c;编译之前先配置&#xff0c;让编译产生x86的virtualbox 镜像&#xff1a; 编译完成之后会产生vdi镜像文件&#xff0c; 在virtualbox 中创建一虚拟机&#xff0c;类型选择linux,版本other linux 64: 内存选择512&#xff1a; 这个地方把镜像…

AUTOSAR中EcuM、ComM和CanNm的关联

ComM的内外部唤醒 ComM可以通过NM保持网络的唤醒&#xff0c;同时也可以通过SM激活通信&#xff0c;总之就像一个通信的总管。 下面通过两种唤醒源来解释ComM的状态机。 1、内部唤醒 ① 当ComM上电初始化时会首先进入NO COMMUNICATION状态&#xff0c;在该状态下ComM会持续循…

TriCore TC162 Archievture Volume 笔记

说明 本文是 英飞凌 架构文档 TriCore TC162P core archiecture Volume 1 of 2 (infineon.com) 的文笔&#xff0c;稍作整理方便查阅&#xff0c;错误之处&#xff0c;还请指正&#xff0c;谢谢 :) 1. Architecture 2. General Purpose & System Register 名词列表&#…