每日一VUE——组件的生命周期

文章目录

  • VUE组件的生命周期
    • 生命周期钩子函数
    • 实例创建
    • Teleport

VUE组件的生命周期

  • 组件生命周期

组件从创建到挂载、更新、到销毁的一系列过程被称为组件的生命周期。

  • 生命周期函数

在组件的各个生命周期节点执行的函数,为生命周期钩子函数。

生命周期钩子函数

组件的生命周期可以分为4个阶段:创建、挂载、更新、销毁。

所以生命周期钩子函数也分为4组:

  1. 创建阶段

    1. 对组件事件和生命周期钩子函数进行初始化,之后立即调用beforeCreate函数
    2. 对组件选项的配置进行初始化,之后立即调用created函数
  2. 挂载阶段

    1. 基于数据和模板,在内存生成虚拟DOM结构,之后立即调用beforeMount函数

    2. 用虚拟DOM结构替换挂载点内的元素,之后立即调用mounted函数

  3. 更新阶段

    1. 根据数据变化,重新更新虚拟DOM结构,之后立即执行beforeUpdate函数

    2. 将虚拟DOM结构更新部分,重新渲染到页面中,之后立即调用update函数

  4. 销毁阶段

    1. 组件实例在被销毁之前,VUE会自动调用beforeUnmount函数,此时组件实例依然保持全部功能

    2. 在组件实例在被销毁之后,VUE会立即调用Unmounted函数

在这里插入图片描述

实例创建

  1. 对组件事件和生命周期钩子函数进行初始化,之后立即调用beforeCreate函数
  2. 对组件选项的配置进行初始化,之后立即调用created函数

Teleport

Teleport内置组件的作用是将组件模板结构的部分内容“传送”给该组件渲染区域之外的地方,一般在创建模态框、弹出窗口或其他覆盖在页面上的元素时使用。

若有错误与不足请指出,关注DPT一起进步吧!!!

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

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

相关文章

科技感画册制作方法,视觉效果直接拉满

随着科技的不断进步,科技感画册制作也变得更加精彩和引人注目。通过巧妙地运用先进的设计工具和技术,以及结合创新的视觉元素,可以轻松地将画册的视觉效果直接拉满。 那你想知道怎么制作吗?现在我来教你这个方法吧,方法…

六、新闻主题分类任务

以一段新闻报道中的文本描述内容为输入,使用模型帮助我们判断它最有可能属于哪一种类型的新闻,这是典型的文本分类问题。我们这里假定每种类型是互斥的,即文本描述有且只有一种类型,例如一篇新闻不能即是娱乐类又是财经类&#xf…

企业Linux常见用户命令/补充Linux文件系统删除原理/userdel(故障原理/etc/skel)详谈-9628字

想提高自己想拿20k以上冲冲冲!!!,想要从0 学习到linux架构师可以关注小编专栏 本来都很卷,你还不努力,想拿高薪,付出行动! linux难点第一阶段非常难 1.命令多复杂(大家抓不住重点&am…

Python爬虫与数据可视化论文课题免费领取咨询

引言 作为一名在软件技术领域深耕多年的专业人士,我不仅在软件开发和项目部署方面积累了丰富的实践经验,更以卓越的技术实力获得了🏅30项软件著作权证书的殊荣。这些成就不仅是对我的技术专长的肯定,也是对我的创新精神和专业承诺…

boot https ssl

生成命令: keytool -importkeystore -srckeystore D:\sslTest.keystore -destkeystore D:\sslTest.keystore -deststoretype pkcs12keytool -genkeypair -alias "sslTestKey" -keyalg "RSA" -keystore "D:\sslTest.keystore"yml: s…

RISCV指令集体系简读之RV32M

RV32M向RV32I中添加了整数乘法和除法指令; RV32M具有有符号和无符号整数的除法指令:divide(div)和divide unsigned(divu),它们将 商放入目标寄存器。在少数情况下,程序员需要余数而不是商,因此RV32M提供 remainder(rem…

使用IT-Tools+Cpolar在Windows搭建自己的IT工具箱并实现远程在线使用

文章目录 1. 使用Docker本地部署it-tools2. 本地访问it-tools3. 安装cpolar内网穿透4. 固定it-tools公网地址 本篇文章将介绍如何在Windows上使用Docker本地部署IT- Tools,并且同样可以结合cpolar实现公网访问。 在前一篇文章中我们讲解了如何在Linux中使用Docker搭…

MercadoLibre(美客多)入仓预约系统操作流程-自动化约号(开篇)

目录 一、添加货件信息 二、输入货件信息 三、选择发货 四、填写交货日期 五、注意事项 MercadoLibre(美客多)于2021年10月18号上线了新预约入仓系统,在MercadoLibre美客多平台上,新入仓预约系统是一项非常重要的功能&#x…

JAVA基础06-面向对象,构造器,递归以及对象创建时内存分析(内含代码与练习)

面向对象的概念以及特征 概念 实质上将 "数据" 与 "行为" 的过程, 以类的形式封装起来, 一切以对象为中心语言。 面向对象的程序设计过程中有两个重要概念:类(class)和对象(也称为实例)。 其中…

【Css】table数据为空,以“-“形式展现

解决:class类名 它表示的是在一个名为class类名的元素内部,当该元素为空时,会在该元素的:before伪元素上应用一些样式。 这种写法通常用于在元素内容为空时,添加一些占位符或者提示文字

代码随想录算法训练营第五十五天 | 392. 判断子序列、115. 不同的子序列

代码随想录算法训练营第五十五天 | 392. 判断子序列、115. 不同的子序列 392. 判断子序列题目解法 115. 不同的子序列题目解法 感悟 392. 判断子序列 题目 解法 题解链接 自己的想法实现 class Solution { public:bool isSubsequence(string s, string t) {if(s.size() >…

20240328-1-Prophet面试题

Prophet面试题 1. 简要介绍Prophet 常见的时间序列分解方法: 将时间序列分成季节项 S t S_t St​,趋势项 T t T_t Tt​,剩余项 R t R_t Rt​,即对所有的 t ≥ 0 t≥0 t≥0 y t S t T t R t y_{t}S_{t}T_{t}R_{t} yt​St​Tt…

人员聚集监测识别摄像机

随着科技的不断发展,人员聚集监测识别摄像机已经成为了现代社会安全管理的重要工具。这种摄像机能够对人员聚集的情况进行实时监测和识别,帮助相关部门及时发现和处理潜在的安全风险。 人员聚集监测识别摄像机可以通过高清晰度的摄像头和先进的人脸识别技…

windows的jar包开机自启动【搬代码】

感觉最方便的就是放到启动项目里操作步骤 winR 输入:shell:startup回车或点击确定 3.将自己jar包右键创建快捷方式 4.然后放进去 5.重启电脑,浏览器输入网址,就可以看到重启成功了 另外一个就是放入.exe文件的快捷方式 首先,…

OpenGL 多重采样抗锯齿(MSAA,Multisample Anti-Aliasing)

多重采样抗锯齿(MSAA,Multisample Anti-Aliasing)是一种用于减少图形渲染中锯齿(aliasing)效应的技术。 锯齿是怎样产生的? 锯齿效应是由于在屏幕上渲染的图形对象边缘处像素颜色变化突然而导致的,它使得图形看起来不够平滑,影响了视觉质量。 如图示,我们渲染一个三…

vue模版字符串解析成vue模版对象

模版字符串 this.code <template><div style"width:100% ; height: 100% ;">{{resultData[0].name}}</div> </template> <script> export default {data() {return {resultData: [{ name: 图幅, value: 20 },]}},mounted(){},method…

音乐文件逆向破解

背景 网易云等在线音乐文件的加密源码都按照一定的规则加密&#xff0c;通过对音乐文件的源码分析转化&#xff0c;有望实现对加密文件的解密 实现内容 实现对加密音乐文件的解密 实现对无版权的音乐文件的转化 实现环境 010editor 010 Editor是一个专业的文本编辑器和十六…

运费计算(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int distance, c;float weight, price, discount, fee;//提示用户&#xff1b;printf("请输入路程&#xff0c;单价…

1.JAVASE练习题(递归篇)

1.递归求解汉诺塔问题 public static void move(char pos1,char pos2) {System.out.print(pos1"->"pos2" "); }public static void hanoi(int n,char pos1,char pos2,char pos3) {if(n 1) {move(pos1,pos3);return;}hanoi(n-1,pos1,pos3,pos2);move(p…

gitlab(docker)安装及使用

GitLab GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 下载(docker) 查询docker镜像gitlab-ce gitlab-ce是它的社区版 [rootlocalhost ~]# docker search gitlab-ce NAME …