当前位置： 首页 > news >正文

Vue/组件的生命周期

news 2026/2/7 13:00:51

这篇文章借鉴了coderwhy大佬的Vue生命周期

在Vue实例化或者创建组件的过程中 内部涉及到一系列复杂的阶段 每一个阶段的前后时机都可能对应一个钩子函数 以下是我根据coderwhy大佬文章对于每一个阶段的一些看法

1.过程一

在这里插入图片描述
首先实例化Vue或者组件 在实例化之前 会对应一个钩子函数beforeCreate(如果未定义的话 肯定不会调用 以下同理) 在实例化之后 也会对应一个钩子函数created

2.过程二

在这里插入图片描述
实例化之后 会判断一下Vue实例中是否挂载了el属性(挂载意味着拿到某一个物品的控制权 可以控制它做事情) 如果挂载了 在判断一下是否挂载了template属性/组件 反之如果没有挂载el属性(即vue组件) 那就需要通过$mount(el)对Vue实例进行el元素的手动挂载 接着在判断是否存在template属性
如果存在template属性的话 那么就会先将其渲染为render函数(runtime compiler模式 即template->ast->render()->vdom->ui) 如果不存在的话 那么就是将render函数转换为虚拟dom最终生成组件ui的过程(runtime only模式 即render()->vdom->ui 该模式体积小 效率高)

3.过程三

在这里插入图片描述
该过程中 创建el指向的dom元素 并且将Vue实例挂载的template替换他 替换完成之时就是挂载完毕之时 在挂载前后存在两个钩子函数用于监听这两个时机
挂载(mount)完毕以后 如果template中的响应式数据发生了改变 那么需要重新渲染处vdom 和真实dom进行比对 以更新真实dom

4.过程四

在这里插入图片描述
当组件不再被挂载/使用时 这时候 组件就进入到了销毁阶段 而在销毁前后定义两个钩子函数用以监听这两个时机

相关文章：

Vue/组件的生命周期

这篇文章借鉴了coderwhy大佬的Vue生命周期 在Vue实例化或者创建组件的过程中 内部涉及到一系列复杂的阶段 每一个阶段的前后时机都可能对应一个钩子函数 以下是我根据coderwhy大佬文章对于每一个阶段的一些看法 1.过程一 首先实例化Vue或者组件 在实例化之前 会对应一个钩子函…...

编程日记 2024/10/7 6:10:23

【Nacos架构 原理】内核设计之Nacos寻址机制

文章目录 前提设计内部实现单机寻址文件寻址地址服务器寻址 前提 对于集群模式，集群内的每个Nacos成员都需要相互通信。因此这就带来一个问题，该以何种方式去管理集群内部的Nacos成员节点信息，即Nacos内部的寻址机制。 设计 要能够感知到节…...

编程日记 2024/10/7 6:09:22

入门案例：mybatis流程,核心，常见错误

入门案例：mybatis执行流程分析 说明： 1.第一步：是从核心配置文件mybatis-config.xml中构建SqlSessionFactory对象，由于核心配置文件mybatis-config.xml中关联了映射文件UserMapper.xml,所以在SqlSessionFactory中也存在映射文件的…...

编程日记 2024/10/7 6:08:21

C++ | Leetcode C++题解之第456题132模式

题目&#xff1a; 题解&#xff1a; class Solution { public:bool find132pattern(vector<int>& nums) {int n nums.size();vector<int> candidate_i {nums[0]};vector<int> candidate_j {nums[0]};for (int k 1; k < n; k) {auto it_i upper_…...

编程日记 2024/10/7 6:06:19

自然语言处理问答系统

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/10/7 6:05:19

Python的几个高级特性

引言 Python是一种功能强大的编程语言&#xff0c;它简洁的语法和强大的库支持使其成为数据科学和机器学习领域的热门选择。在Python的高级特性中&#xff0c;生成器、迭代器、闭包、装饰器和内置高阶函数是实现高效、优雅代码的关键。本文将逐一介绍这些特性&#xff0c;并提…...

编程日记 2024/10/7 6:02:16

【颜色平衡树 / E】

题目 思路 DFS暴力 60分 代码 #include <bits/stdc.h> using namespace std; const int N 5010; const int M 5010; int h[N], e[M], ne[M], idx; int c[N], f; int ans; void add(int a, int b) // 添加一条边a->b {e[idx] b, ne[idx] h[a], h[a] idx ; } …...

编程日记 2024/10/7 6:00:14

滑动窗口--（中篇）

将X减到0的最小操作数 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 nums 最左边或最右边的元素&#xff0c;然后从 x 中减去该元素的值。请注意&#xff0c;需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 &#xff0c;返…...

编程日记 2024/10/7 5:59:13

Java性能调优：实战技巧与最佳实践

引言 Java作为企业级应用开发的首选语言之一&#xff0c;其性能直接影响到系统的响应速度和用户体验。性能调优是一项复杂的工作&#xff0c;涉及多个层面的知识和技术。本文将通过具体的示例&#xff0c;探讨一些常见的性能调优技巧及最佳实践。 1. 了解你的应用程序 示例&…...

编程日记 2024/10/7 5:58:12

排版套料系统设计说明

先上效果图 项目地址 1.产品介绍 产品名称&#xff1a;StreamFit 智能排版套料系统 主要功能&#xff1a; 智能排版优化 功能描述&#xff1a;StreamFit 利用先进的算法技术&#xff0c;自动对各类材料&#xff08;如布料、金属板材、纸张等&#xff09;进行高效排版布局&am…...

编程日记 2024/10/7 5:56:09

算法修炼之路之二分查找

目录 一:三大二分介绍及模板 1.普通二分 2.查找左右边界的二分及模板 二:LeetCode OJ练习 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 一:三大二分介绍及模板 1.普通二分 这里通过一道题来引出普通二分及模板 LeetCode_704 二分查找 画图分析: 具体代…...

编程日记 2024/10/7 5:55:08

OpenAI预计明年将推出“代理”系统

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/10/7 5:54:07

每日OJ题_牛客_重排字符串_贪心_C++_Java

目录 牛客_重排字符串_贪心 题目解析 C代码 Java代码 牛客_重排字符串_贪心 重排字符串 (nowcoder.com) 描述&#xff1a; 小红拿到了一个只由小写字母组成的字符串。她准备把这个字符串重排&#xff08;只改变字母的顺序&#xff0c;不改变数量&#xff09; …...

编程日记 2024/10/7 5:51:04

Python 进阶部分详细整理

1. 面向对象编程&#xff08;OOP&#xff09; 面向对象编程 (OOP) 是一种通过将程序中的数据和功能封装为对象的编程范式。OOP 基于四个核心概念&#xff1a;类与对象、继承、封装与多态。 类与对象 类&#xff08;Class&#xff09;&#xff1a;类是创建对象的蓝图或模板。它…...

编程日记 2024/10/7 5:50:03

[ RK3566-Android11 ] 关于移植 RK628F 驱动以及后HDMI-IN图像延迟/无声等问题

问题描述 由前一篇文章https://blog.csdn.net/jay547063443/article/details/142059700?fromshareblogdetail&sharetypeblogdetail&sharerId142059700&sharereferPC&sharesourcejay547063443&sharefromfrom_link&#xff0c;移植HDMI-IN部分驱动后出现&a…...

编程日记 2024/10/7 5:47:00

【黑马点评】 使用RabbitMQ实现消息队列——2.使用RabbitMQ监听秒杀下单

2 使用RabbitMQ实现消息队列 2.1 修改\hm-dianping\pom.xmlpom.xml文件 添加RabbitMQ的环境 <!-- RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </depe…...

编程日记 2024/10/7 5:44:58

业务封装与映射 -- OTUk/ODUk/OPUk开销帧结构

开销是为了保证净荷正常、灵活传送所必须附加的供网络运行、管理和维护&#xff08;OAM&#xff09;使用的字节。 OTN电层开销包括OTUk开销、ODUk开销、OPUk开销、OTUCn开销、ODUCn开销、OPUCn开销和帧对齐开销。 SM开销属于OTU开销&#xff0c;占用3个字节&#xff1b;PM开销…...

编程日记 2024/10/7 5:42:55

Vim基本用法

Vim用法 一、基本模式 1. 普通模式&#xff08;Normal Mode&#xff09; 移动光标 基本移动&#xff1a;使用方向键&#xff08;h左移、j下移、k上移、l右移&#xff09;&#xff0c;也可以使用 H&#xff08;移到屏幕顶部&#xff09;、M&#xff08;移到屏幕中间&#xff…...

编程日记 2024/10/7 5:41:54

python 实现Tarjan 用于在有向图中查找强连通分量的算法

Tarjan 用于在有向图中查找强连通分量的算法介绍 Tarjan算法是一种用于在有向图中查找强连通分量的高效算法&#xff0c;由Robert Tarjan在1972年提出。强连通分量是指在有向图中&#xff0c;如果从顶点u到顶点v以及从顶点v到顶点u都存在一条路径&#xff0c;那么顶点u和顶点v…...

编程日记 2024/10/7 5:40:53

Qt开发技巧（十五）字符串去除空格，跨网段搜索不生效，设置图片显示失败问题，表格视图的批量删除，主动判断字串编码，开启向前查询的属性，画家类载入html来绘制

继续讲一些Qt开发中的技巧操作&#xff1a; 1.字符串去除空格 我们经常会遇到字符串重去除空格的情况&#xff0c;对于QString去除空格&#xff0c;有多种场景&#xff0c;可能需要去除左侧、右侧、所有等位置的空格&#xff1b; //字符串去空格 -1移除左侧空格 0移除所有空格…...

编程日记 2024/10/7 5:37:51

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/1/31 13:59:37

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00