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

Vue/组件的生命周期

news 2025/11/5 8:51:42

这篇文章借鉴了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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/10/30 16:33:16

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/11/4 17:33:30

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/11/5 2:05:22

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/10/31 17:24:49

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/10/30 7:47:14

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/11/3 16:36:06

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2025/11/2 3:43:51