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

前端基础之《Vue（7）—生命周期》

article 2026/1/12 15:05:15

一、什么是生命周期

1、生命周期
组件从“生”到“死”的全过程。
每一个组件都有生命周期。

2、生命周期四大阶段
创建阶段：beforeCreate、created
挂载阶段：beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed

3、生命周期图示

用人的一生来看生命周期：
beforeCreate：出生之前
created：出生了
beforeMount：到派出所办户口（生成虚拟DOM）
mounted：户口本上加了一页纸
......一岁一岁长大......
beforeDestroy：上帝召唤了
destroyed：G了，要重开了

（1）Init Events & Lifecycle
环境初始化，钩子函数、methods选项声明。
（2）Init injections & reactivity
组件上下文数据的注入，对data调用遍历，把data中所有的数据放在this中。
Vue的响应式劫持，就发生在这儿。加set、get钩子。
（3）Has "el" option?
组件有没有el选项。如果没有找mount()方法。
（4）Has "template" option?
找视图结构。视图模板。
（5）如果有template或者如果没有template
YES：Compile template into render function
编译这个模板，变成render方法。render方法用来生成虚拟DOM。
NO：Compile el's outerHTML as template
取当前el节点外部的HTML标签来做。
（6）Create vm.$el and replace "el" with it
调用render方法，创建虚拟DOM。并且对模板遍历指令收集，把指令中数据变成真实数据。
（7）when data changes
当data发生变化时。
（8）Virtual DOM re-render and path
再次调用render，生成一个新的虚拟DOM。
现在得到两个虚拟DOM。
循环递归运算，找出两个虚拟DOM的差异（找出最小的脏节点集合），通过一个队列更新，重新渲染DOM。
（9）when vm.$destroy() is called
当虚拟DOM被destroy()方法调用，路由切换的时候，组件会销毁。
（10）Teardown watchers, child components and event listeners
拆卸watchers、子组件，事件处理器解绑。

二、例子代码

<html>
<head><title>生命周期</title></head>
<body><div id="app"><h1 v-text="num"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},beforeCreate() {console.log('---beforeCreate')},created() {console.log('---created')},beforeMount() {console.log('---beforeMount')},mounted() {console.log('---mounted')},beforeUpdate() {console.log('---beforeUpdate')},updated() {console.log('---updated')},beforeDestroy() {console.log('---beforeDestroy')},destroyed() {console.log('---destroyed')},methods: {add() {console.log('---add')this.num++}}})app.$mount('#app') // 挂载，相当于el选项</script></body>
</html>

说明：

钩子函数挂载在$options下面

三、8个生命周期备注

// 声明生命周期钩子
beforeCreate() {
    console.log('---beforeCreate')
    // 作用：
    // 几乎用不到
},
// 注入provide数据
// 响应式劫持
// 把data上数据遍历后放在this上
created() {
    console.log('---created')
    // 作用：
    // 调接口
},
// 通过el/$mount/template找视图模板
// 把template视图模板编译成render方法，用于生成虚拟DOM
beforeMount() {
    console.log('---beforeMount')
},
// 创建$el挂载节点
// 调用render()方法，第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述）
// Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集，通知Watcher第一次完成DOM渲染
mounted() {
    console.log('---mounted')
    // 作用：
    // 调接口、开定时器、建立webscoket长连接、echarts图表的实例化、DOM/BOM操作
},
// 网页呈现，当各种事件交互触发data变化时
beforeUpdate() {
    console.log('---beforeUpdate')
    // 作用：
    // 几乎用不到
},
// 再次调用render()方法，生成新的虚拟DOM（现在有了两个虚拟DOM）
// 执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合）
// 通过一个协调队列进行异步更新
updated() {
    console.log('---updated')
    // 作用：
    // 在某些场景下，可以模拟出watch/$nextTick()的功能
},
// 当调用$destroy()或路由切换时，即将进入销毁阶段
beforeDestroy() {
    console.log('---beforeDestroy')
    // 作用：
    // 清除定时器、清缓存、性能优化
},
// 移除当前组件的Watcher，DOM将无法再更新了
// teardown拆卸掉所有的子组件
// 移除事件监听器
destroyed() {
    console.log('---destroyed')
    // 作用：
    // 几乎用不到
},

用到最多的是：
created、mounted、beforeDestroy

四、与动态组件有关的特殊的钩子

1、activated
组件激活

2、deactivated
组件休眠

3、errorCaptured
与组件异常捕获有关的钩子

五、小结

1、什么是虚拟DOM
虚拟DOM是一个很大的JSON数据，用于描述视图模板的，保存在内存中。

2、虚拟DOM的价值点在哪里
在于数据更新阶段，把DOM更新粒度降到最低，规避人为的DOM滥操作。

3、什么是diff运算
在更新阶段，patch对新旧虚拟DOM进行对比，找出脏节点集合，提交更新。

4、什么是MVVM
M：数据层
V：视图层
VM：虚拟DOM层

M数据层 -> VM虚拟DOM层 -> V视图层
 

相关文章：

前端基础之《Vue（7）—生命周期》

一、什么是生命周期 1、生命周期 组件从“生”到“死”的全过程。 每一个组件都有生命周期。 2、生命周期四大阶段 创建阶段&#xff1a;beforeCreate、created 挂载阶段&#xff1a;beforeMount、mounted 更新阶段&#xff1a;beforeUpdate、updated 销毁阶段&#xff1a;be…...

编程日记 2026/1/6 6:21:34

C语言高频面试题——指针数组和数组指针

指针数组和数组指针是 C/C 中容易混淆的两个概念&#xff0c;以下是详细对比&#xff1a; 1. 指针数组&#xff08;Array of Pointers&#xff09; 定义&#xff1a;一个数组&#xff0c;其元素是 指针类型。语法&#xff1a;type* arr[元素个数]; 例如&#xff1a;int* ptr_a…...

编程日记 2025/12/30 12:39:50

Linux服务器配置Anaconda环境、Pytorch库（图文并茂的教程）

引言&#xff1a;为了方便后续新进组的 师弟/师妹 使用课题组的服务器&#xff0c;特此编文&#xff08;ps&#xff1a;我导从教至今四年&#xff0c;还未招师妹&#xff09; ✅ NLP 研 2 选手的学习笔记 笔者简介&#xff1a;Wang Linyong&#xff0c;NPU&#xff0c;2023级&a…...

编程日记 2026/1/10 20:08:18

Android端使用无障碍服务实现远程、自动刷短视频

最近在做一个基于无障碍自动刷短视频的APP&#xff0c;需要支持用任意蓝牙遥控器远程控制&#xff0c; 把无障碍服务流程大致研究了一下&#xff0c;从下面3个部分做一下小结。 1、需要可调整自动上滑距离和速度以适配不同的屏幕和应用 智能适配99%机型&#xff0c;滑动参数可…...

编程日记 2026/1/2 21:41:21

搭建用友U9Cloud ERP及UAP IDE环境

应用环境 Microsoft Windows 10.0.19045.5487 x64 专业工作站版 22H2Internet Information Services - 10.0.19041.4522Microsoft SQL Server 2019 - 15.0.2130.3 (X64)Microsoft SQL Server Reporing Services 2019 - 15.0.9218.715SQL Server Management Studio -18.6 laster…...

编程日记 2026/1/1 10:31:00

多模态大语言模型arxiv论文略读（二十九）

Temporal Insight Enhancement: Mitigating Temporal Hallucination in Multimodal Large Language Models ➡️ 论文标题&#xff1a;Temporal Insight Enhancement: Mitigating Temporal Hallucination in Multimodal Large Language Models ➡️ 论文作者&#xff1a;Li Su…...

编程日记 2026/1/6 3:52:27

Java开发中的设计模式之观察者模式详细讲解

观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都会自动收到通知并更新。这种模式在Java开发中非常常见&#xff0c;尤其是在事件驱…...

编程日记 2025/12/30 17:39:25

基于SpringAI Alibaba实现RAG架构的深度解析与实践指南

一、RAG技术概述 1.1 什么是RAG技术 RAG&#xff08;Retrieval-Augmented Generation&#xff09;检索增强生成是一种将信息检索技术与生成式AI相结合的创新架构。它通过以下方式实现智能化内容生成&#xff1a; 知识检索阶段&#xff1a;从结构化/非结构化数据源中检索相关…...

编程日记 2025/12/9 19:36:12

卷积神经网络（CNN）详解

文章目录 引言1.卷积神经网络&#xff08;CNN&#xff09;的诞生背景2.卷积神经网络&#xff08;CNN&#xff09;介绍2.1 什么是卷积神经网络&#xff1f;2.2 卷积神经网络&#xff08;CNN&#xff09;的基本特征2.2.1 局部感知&#xff08;Local Connectivity&#xff09;2.2.…...

编程日记 2026/1/1 15:22:31

element-plus添加暗黑模式

main.ts文件 //引入暗黑模式样式 import "element-plus/theme-chalk/dark/css-vars.css"; style.scss文件 // 设置默认主题色 :root {--base-menu-min-width: 80px;--el-color-primary-light-5: green !important;--route--view--background-color: #fff !import…...

编程日记 2026/1/7 16:57:07

【SF顺丰】顺丰开放平台API对接（注册、API测试篇）

1.注册开发者账号 注册地址&#xff1a;顺丰企业账户中心 2.登录开发平台 登录地址&#xff1a;顺丰开放平台 3.开发者对接 点击开发者对接 4.创建开发对接应用 开发者应用中“新建应用”创建应用&#xff0c;最多创建应用限制数量5个 注意&#xff1a;需要先复制保存生产校验…...

编程日记 2026/1/1 13:17:57

VisualSVN过期后的解决方法

作为一款不错的源代码管理软件&#xff0c;svn还是有很多公司使用的。在vs中使用svn&#xff0c;大家一般用的都是VisualSVN插件。在30天试用期过后&#xff0c;它就不能被免费使用了。下面给大家讲如何免费延长过期时间&#xff08;自定义天数&#xff0c;可以设定一个很大的值…...

编程日记 2026/1/9 19:00:58

代码随想录算法训练营第二十一天

LeetCode题目: 93. 复原 IP 地址78. 子集90. 子集 II2364. 统计坏数对的数目 其他: 今日总结 往期打卡 93. 复原 IP 地址 跳转: 93. 复原 IP 地址 学习: 代码随想录公开讲解 问题: 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能…...

编程日记 2025/12/9 2:31:48

21. git apply

基本概述 git apply 的作用是&#xff1a;应用补丁文件 基本用法 1.命令格式 git apply [选项] <补丁文件>2.应用补丁 git apply patchfile.patch将补丁应用到工作目录&#xff0c;但不会自动添加到暂存区&#xff08;需手动 git add&#xff09; 常用选项 1.检查…...

编程日记 2026/1/9 5:07:07

DeepSeek智能时空数据分析（二）：3秒对话式搞定“等时圈”绘制

序言&#xff1a;时空数据分析很有用&#xff0c;但是GIS/时空数据库技术门槛太高 时空数据分析在优化业务运营中至关重要&#xff0c;然而&#xff0c;三大挑战仍制约其发展&#xff1a;技术门槛高&#xff0c;需融合GIS理论、SQL开发与时空数据库等多领域知识&#xff1b;空…...

编程日记 2026/1/12 14:33:47

STM32学习2

一、OLED 1.1 OLED介绍 OLED&#xff08;Organic Light Emitting Diode&#xff09;&#xff1a;有机发光二极管 OLED显示屏&#xff1a;性能优异的新型显示屏&#xff0c;具有功耗低、相应速度快、宽视角、轻薄柔韧等特点 0.96寸OLED模块&#xff1a;小巧玲珑、占用接口少…...

编程日记 2026/1/1 19:12:20

数据处理: 亲和聚类

Affinity Propagation&#xff08;亲和传播&#xff09;是一种基于"消息传递"概念的聚类算法&#xff0c;由Brendan Frey和Delbert Dueck于2007年提出。与K-Means等需要预先指定簇数量的算法不同&#xff0c;Affinity Propagation能够自动确定最佳簇的数量&#xff0…...

编程日记 2025/12/9 9:35:53

LabVIEW液压系统远程监控与故障诊断

开发了一种基于LabVIEW的远程液压系统监控解决方案&#xff0c;通过先进的数据采集与分析技术&#xff0c;有效提升工程机械的运作效率和故障响应速度。该系统结合现场硬件设备和远程监控软件&#xff0c;实现了液压系统状态的实时检测和故障诊断&#xff0c;极大地提升了维护效…...

编程日记 2026/1/4 16:02:10

Idea中实用设置和插件

目录 一、Idea使用插件 1.Fitten Code智能提示 2.MyBatisCodeHelperPro 3.HighlightBracketPair‌ 4.Rainbow Brackets Lite 5.GitToolBox（存在付费） 6.MavenHelperPro 7.Search In Repository 8.VisualGC（存在付费） 9.vo2dto 10.Key Promoter X 11.CodeGlance…...

编程日记 2026/1/1 7:10:57

安卓处理登录权限问题

在安卓应用中实现登录权限控制&#xff0c;需确保用户登录后才能访问特定功能。以下是分步骤的解决方案&#xff1a; 1. 保存和检查登录状态 使用安全存储保存登录凭证&#xff1a; 推荐使用 EncryptedSharedPreferences 存储敏感信息&#xff08;如Token、用户ID&#xff09…...

编程日记 2025/12/7 17:30:26

Java写数据结构：栈

1.概念&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xff1a;栈的插…...

编程日记 2026/1/12 2:38:52

使用Unity Cache Server提高效率

2021年1月20日19:04:28 1 简介 Unity Cache Server，翻译过来就是Unity缓存服务器 1.1 缓存服务器の官方介绍 Unity 有一个完全自动的资源管线。每当修改 .psd 或 .fbx 文件等源资源时，Unity 都会检测到更改并自动将其重新导入。随后，Unity 以内部格式存储从文件导入的数…...

编程日记 2025/12/9 2:28:29

29个常见的Terraform 面试问题

问题 1&#xff1a;假设您使用 Terraform 创建了一个 EC2 实例&#xff0c;创建完成后&#xff0c;您从状态文件中删除了该条目&#xff0c;那么运行 Terraform Apply 命令时会发生什么&#xff1f; 由于我们已从该状态文件中删除了该条目&#xff0c;因此 Terraform 将不再管…...

编程日记 2025/12/8 21:23:27

机器学习-08-推荐算法-案例

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中关联规则 参考 机器学习&#xff08;三&#xff09;&#xff1a;Apriori算法&#xff08;算法精讲&#xff09; Apriori 算法 理论 重点 MovieLens:一个常用的电影推荐系统领域的数据集 23张图&#x…...

编程日记 2025/12/31 4:16:47

LLM中的N-Gram、TF-IDF和Word embedding

文章目录 1. N-Gram和TF-IDF&#xff1a;通俗易懂的解析1.1 N-Gram&#xff1a;让AI学会"猜词"的技术1.1.1 基本概念1.1.2 工作原理1.1.3 常见类型1.1.4 应用场景1.1.5 优缺点 1.2 TF-IDF&#xff1a;衡量词语重要性的尺子1.2.1 基本概念1.2.2 计算公式1.2.3 为什么需…...

编程日记 2026/1/9 10:27:15

uniapp APP端 DOM生成图片保存到相册

<template> <view class"container" style"padding-bottom: 30rpx;"> <view class"hdbg pr w100 " style"height: 150rpx;"> <top-bar content分享 Back"Back"></top-b…...

编程日记 2025/12/9 19:12:01

Office文件内容提取 | 获取Word文件内容 |Javascript提取PDF文字内容 |PPT文档文字内容提取

关于Office系列文件文字内容的提取 本文主要通过接口的方式获取Office文件和PDF、OFD文件的文字内容。适用于需要获取Word、OFD、PDF、PPT等文件内容的提取实现。例如在线文字统计以及论文文字内容的提取。 一、提取Word及WPS文档的文字内容。 支持以下文件格式&#xff1a; …...

编程日记 2026/1/1 12:09:50

算法——背包问题（分类）

背包问题&#xff08;Knapsack Problem&#xff09;是一类经典的组合优化问题&#xff0c;广泛应用于资源分配、投资决策、货物装载等领域。根据约束条件和问题设定的不同&#xff0c;背包问题主要分为以下几种类型&#xff1a; 1. 0-1 背包问题&#xff08;0-1 Knapsack Probl…...

编程日记 2025/12/9 4:12:55

HXBC编译相关错误

0、Keil MDK报错：Browse information of one or more files is not available----解决方法： 1、使用cubemax生成的工程中，某些引脚自定义了的，是在main.h中，要记得移植。 注意：cubemax生成的spi.c后，在移植的时候，注意hal_driver下面要对应增加hal_stm32H7xxxspi.c …...

编程日记 2026/1/1 16:19:52

Windows 环境下 Apache 配置 WebSocket 支持

目录 前言1. 基本知识2. 实战前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器，无代码爬取，就来：bright.cn 原先写过apache的http配置：Apache httpd-vhosts.conf 配置详解（附Demo） 1. 基本知识 🔁 WebSocket 是 HTTP 的升级协议 客户…...

编程日记 2025/12/7 19:43:40