vue 知识点———— 生命周期
1.什么是生命周期
Vue实例从创建到销毁的过程,叫生命周期。 从开始创建、初始化数据、编译模版、挂载Dom-渲染、更新-渲染、销毁等过程。
2.生命周期一共有几个阶段
创建前/后, 载入前/后,更新前/后,销毁前/销毁后
3.初始化相关属性
- beforeCreate(创建前):在数据观测和初始化事件还未开始。
在实例初始化之后,数据观测和事件配置之前被调用
- created(创建后):完成数据观察,属性和方法的运算,初始化事件,$el属性还没有显示出来。
在实例创建完成后被立即调用
- beforeMount(载入前):在挂载开始之前被调用,相关的render函数首次被调用。实例已完成编译模板,data里的数据和模板生成html。注意此时还没有挂载到页面上。
在挂载开始之前被调用
- mounted(载入后):在el被新创建的vm.$el 替换,并挂在到实例上之后调用。实例已完成:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到页面上。这个过程已和ajax交互。
el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子
DOM在该生命周期中渲染已完成
4.更新
- beforeUpdate(更新前):在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该生命周期中进一步更改状态,不会触发重新渲染过程。
数据更新时调用,发生在虚拟DOM打补丁之前
- updated(更新后):在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。组件已更新,所以可以执行依赖于DOM的操作。避免在此期间更改状态,因为会导致更新无限循环,该钩子在服务器端渲染期间不被调用。
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子
5.销毁
- beforeDestroy(销毁前):在实例销毁之前调用。
实例销毁之前调用
- destroyed(销毁后):在实例销毁之后调用。调用后所有的时间监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
实例销毁后调用
6.页面第一次加载会触发哪几个钩子
beforeCreate / created / beforeMount / mounted
相关文章:
vue 知识点———— 生命周期
1.什么是生命周期 Vue实例从创建到销毁的过程,叫生命周期。 从开始创建、初始化数据、编译模版、挂载Dom-渲染、更新-渲染、销毁等过程。 2.生命周期一共有几个阶段 创建前/后, 载入前/后,更新前/后,销毁前/销毁后 3.初始化相关属性 beforeCreate(创建前…...
焊接符号学习
欧美焊接符号举例 4.5------表示焊点直径 【3】------根据图示说明,表示此项为CC项或者SC项 6-------表示此处为第六CC项或者SC项 BETWEEN①AND②------表示①件和②件俩点之间的焊点 12X------表示俩点之间的焊点个数为12个 日本焊接符号举例 A------根据图示&…...
记录linux清理空间的步骤
sudo du -sh /* 看整体空间占用情况 [roothost ~]# sudo du -sh /* 0 /bin 143M /boot 85M /data 0 /dev 38M /etc 4.0K /home 0 /lib 0 /lib64 16K /lostfound 4.0K /media 4.0K /mnt 31M /opt 0 /proc 260K /r…...
丰田工厂停产竟然因为磁盘...
丰田因磁盘空间不足关闭14家工厂 在如今的信息时代,无论是生活还是工作,我们都离不开计算机和网络。然而,令人惊讶的是,一家全球知名的汽车制造商——丰田,却因为磁盘空间不足的问题,被迫关闭了14家工厂。…...
Python工程师Java之路(p)Maven聚合和继承
文章目录 依赖管理依赖传递可选依赖和排除依赖 继承与聚合 依赖管理 指当前项目运行所需的jar,一个项目可以设置多个依赖 <!-- 设置当前项目所依赖的所有jar --> <dependencies><!-- 设置具体的依赖 --><dependency><!-- 依赖所属群组…...
Java 复习笔记 - Lambda 表达式 he 经典算法题
文章目录 Lambda表达式 概述(一)基本作用(二)特点 一,初识Java中的Lambda 表达式二,函数式编程三,省略写法四,练习:使用Lambda 表达式 简化Comparator接口的匿名形式综合…...
算法——快乐数
202. 快乐数 - 力扣(LeetCode) 由图可知,其实这也是一个判断循环的过程,要用到快慢指针,且相遇后,若在全为1的循环里,那么就是快乐数,若相遇后不为1,说明这不是快乐数。 …...
vue使用window.location.href 跳转失败
问题: vue项目中直接使用window.lcocation.href跳转外链,但是跳转的链接会被拼接成这样 http://localhost:8080/#/www.baidu.com 原因: 我们打开的外部链接会自动拼接我们的源地址,导致网址链接不正确,无法正常访问 …...
【备忘】清理Office缓存
【背景】电脑安装了M365 Apps for enterprise的客户端,遇到不常见的奇怪问题。尝试看清理缓存是否可以解决。 【清理步骤】 1. 关闭所有Office365 应用; 2. 搜索 %AppData% ,并打开该文件夹; 3. 进到 AppData > Local > M…...
MacOS环境变量source生效但重启后又失效
https://blog.csdn.net/dxk539687357/article/details/127942044 .bash_profile 和 .zshrc 都是macos系统重环境变量配置的文件,但是两者有不同之处。 .bash_profile:在执行source ~/.bash_profile,只在当前窗口生效,但关闭当前…...
Sql语句大全--插入
今天抽空整理下项目中的Sql语句 项目中用到的Sql语句大全 Insert 语句,有简有难 Insert 语句,有简有难 insert into clayor (pco,ppolnum,ptype,psn,prela,pname,pid,paddr1,paddr2,pbakcod1,pbakcod2,paccnum,pchkflag,pagtcod,pstatus, pchksts,pauth…...
Unity 收取“运行费”引众怒,开源免费3D游戏引擎CGE(Castle Game Engine)吸引开发者关注
特征 1. 总结2. 跨平台3. 可视化编辑器4.视口与场景,相机,导航和其他组件5. 数据格式 5.1. glTF5.2. X3D5.3. 精灵表5.4. 脊柱6. 图形效果7. 图片8. 用户界面组件 8.1. 文本和字体9. 网络10. 优化和分析11. 声音12. 物理13. 平铺集成14. 粒子15. 使用现代…...
Apache DolphinScheduler - 快速扩展 TaskPlugin 从入门到放弃
目前在大数据生态中,调度系统是不可或缺的一个重要组件。Apache DolphinScheduler 作为一个顶级的 Apache 项目,其稳定性和易用性也可以说是名列前茅的。而对于一个调度系统来说,能够支持的可调度的任务类型同样是一个非常重要的因素…...
线性代数的本质(四)——行列式
文章目录 行列式二阶行列式 n n n 阶行列式行列式的性质克拉默法则行列式的几何理解 行列式 二阶行列式 行列式引自对线性方程组的求解。考虑两个方程的二元线性方程组 { a 11 x 1 a 12 x 2 b 1 a 21 x 1 a 22 x 2 b 2 \begin{cases} a_{11}x_1a_{12}x_2b_1 \\ a_{21}x_…...
适合初学者快速入门的Numpy实战全集
适合初学者快速入门的Numpy实战全集 Numpy是一个用python实现的科学计算的扩展程序库,包括: 1、一个强大的N维数组对象Array;2、比较成熟的(广播)函数库;3、用于整合C/C和Fortran代码的工具包;…...
rabbitmq 面试题
1.交换机类型 RabbitMQ是一个开源的消息队列系统,它支持多种交换机类型,用于在消息的生产者和消费者之间路由和分发消息 Direct Exchange(直接交换机):Direct交换机是最简单的交换机类型之一。它将消息按照消息的Rout…...
比较Visual Studio Code中的文件
目录 一、比较两个文件 1.1VS code中的文件大致分为两类: 1.2如何比较VS code中的两个文件? 二、并排差异模式:VS code中的一种差异模式 三、内联差异模式:VS code中的另一种差异模式 四、VS code忽略在行首或者行尾添加或删除…...
誉天在线项目-UML状态图+泳道图
什么是UML UML(Unified Modeling Language)是一种用于软件系统建模的标准化语言。它提供了一组图形符号和规范,用于描述和设计软件系统的结构、行为和交互。 UML图形符号包括类图、用例图、时序图、活动图、组件图、部署图等,每…...
【linux基础(六)】Linux中的开发工具(中)--gcc/g++
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:Linux从入门到开通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学更多操作系统知识 🔝🔝 Linux中的开发工具 1. 前言2.…...
u盘上面 安装 ubuntu 系统
u盘上面 安装 ubuntu 系统 下载 一个 Ubuntu 22.04.3 LTS 桌面版 https://ubuntu.com/download/desktop 找到一个U盘 参考文章: 把 Ubuntu 装到U盘里随身携带,并同时支持 BIOS 和 UEFI 启动 https://www.luogu.com.cn/blog/GGAutomaton/portable-ubu…...
终极指南:如何快速构建响应式React网格布局
终极指南:如何快速构建响应式React网格布局 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout React网格布局࿰…...
Qwen3.5-2B部署实战:端侧轻量化多模态模型一键镜像教程
Qwen3.5-2B部署实战:端侧轻量化多模态模型一键镜像教程 1. 模型简介 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型,属于Qwen3.5系列的小参数版本(20亿参数)。这个模型专为低功耗、低门槛部署场景设计,特别适合端侧…...
HUNYUAN-MT 7B翻译终端Python爬虫数据清洗实战:多语言文本归一化处理
HUNYUAN-MT 7B翻译终端Python爬虫数据清洗实战:多语言文本归一化处理 1. 引言 你有没有遇到过这种情况?辛辛苦苦用Python爬虫从全球各地的网站、论坛、社交媒体上抓取了一大堆数据,准备做分析或者训练模型,结果打开一看…...
WarcraftHelper:魔兽争霸III游戏性能优化与兼容性解决方案完整指南
WarcraftHelper:魔兽争霸III游戏性能优化与兼容性解决方案完整指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏《魔兽争…...
Qwen3.5-9B自动化:GitHub Actions触发模型推理+PR评论生成
Qwen3.5-9B自动化:GitHub Actions触发模型推理PR评论生成 1. 项目概述 Qwen3.5-9B是一个拥有90亿参数的开源大语言模型,具备强大的逻辑推理、代码生成和多轮对话能力。最新版本还支持多模态理解(图文输入)和长达128K tokens的上…...
Face Analysis WebUI在金融领域的应用:远程开户身份核验
Face Analysis WebUI在金融领域的应用:远程开户身份核验 1. 引言 想象一下这样的场景:一位偏远地区的客户想要开设银行账户,但最近的银行网点在100公里外。传统方式下,他需要亲自前往网点,排队等待,提交各…...
teler IDS v3前瞻:eBPF技术与teler-waf集成带来的革命性变革
teler IDS v3前瞻:eBPF技术与teler-waf集成带来的革命性变革 【免费下载链接】teler Real-time HTTP Intrusion Detection 项目地址: https://gitcode.com/gh_mirrors/te/teler teler IDS作为一款实时HTTP入侵检测系统,在网络安全领域已经建立了坚…...
CMake实战:用ExternalProject_Add一键集成第三方库(附spdlog完整配置)
CMake实战:用ExternalProject_Add一键集成第三方库(附spdlog完整配置) 在C项目开发中,第三方库的集成往往是最耗时的环节之一。传统的手动下载、编译、配置头文件路径和链接库文件的方式,不仅效率低下,还会…...
【实战指南】腾讯会议回放视频如何批量下载与本地永久保存?免费工具全解析
1. 为什么需要本地保存腾讯会议回放? 每次参加完重要会议或培训课程,最怕的就是回放视频突然过期。我遇到过好几次这种情况:刚想复习某个关键知识点,发现视频已经显示"已过期"。特别是当会议组织者设置了7天自动删除规则…...
【多模态技术解析】先对齐再融合:动量蒸馏如何重塑视觉与语言表征学习
1. 为什么视觉和语言要先对齐再融合? 想象一下你正在教一个小朋友认识动物。如果先给他看一张猫的图片,再告诉他"这是狗",小朋友肯定会困惑。这就是典型的模态未对齐问题——视觉信息和语言信息没有正确匹配。在多模态AI领域&#…...
