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

深入探究 Vue 实例挂载过程与场景 —— 代码实例详解

news 来源：原创 2025/8/3 12:22:44

Vue 实例挂载过程及使用场景分析

Vue 实例的挂载过程是 Vue 应用启动的核心，它决定了 Vue 组件如何与 DOM 进行绑定。在理解 Vue 实例挂载的过程后，我们可以根据不同的使用场景来选择合适的挂载方式。下面详细讲解 Vue 实例的挂载过程、常见使用场景，并通过实际项目示例进行说明。

一、Vue 实例挂载的过程

在 Vue 中，实例的创建和挂载主要分为以下几个步骤：

1. 创建 Vue 实例

使用 new Vue() 创建 Vue 实例时，Vue 会根据提供的配置对象（如 data、methods、template 等）初始化实例。Vue 实例的创建包括数据初始化、事件监听、生命周期钩子等。

const app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});
2. 编译模板

Vue 会将传入的模板（template 或 el 中的内容）编译为虚拟 DOM。这个虚拟 DOM 是 Vue 内部用于高效更新真实 DOM 的数据结构。

  • 如果是 template 配置项，Vue 会将它编译成虚拟 DOM。
  • 如果是 el 配置项，Vue 会从 el 绑定的 DOM 中获取模板。
3. 渲染虚拟 DOM

Vue 会根据编译后的模板渲染出虚拟 DOM。虚拟 DOM 是一个 JavaScript 对象，它描述了 DOM 树的结构。通过虚拟 DOM，Vue 可以高效地与真实 DOM 进行对比和更新。

4. 挂载到 DOM

如果 el 配置项存在，Vue 会在渲染虚拟 DOM 后将其挂载到指定的 DOM 元素中。Vue 会将虚拟 DOM 转换成实际的 DOM 元素并插入到页面中。

<div id="app">{{ message }}
</div>

当挂载完成后，#app 会显示 "Hello Vue!"。

5. 生命周期钩子

一旦 Vue 实例挂载完成，会进入到各个生命周期钩子的执行过程。常见的生命周期钩子包括：

  • created: 实例被创建后调用。
  • mounted: 实例挂载到 DOM 后调用。
  • updated: 数据更新后调用。
  • destroyed: 实例销毁后调用。
const app = new Vue({el: '#app',data: {message: 'Hello Vue!'},created() {console.

相关文章：

深入探究 Vue 实例挂载过程与场景 —— 代码实例详解

Vue 实例挂载过程及使用场景分析 Vue 实例的挂载过程是 Vue 应用启动的核心，它决定了 Vue 组件如何与 DOM 进行绑定。在理解 Vue 实例挂载的过程后，我们可以根据不同的使用场景来选择合适的挂载方式。下面详细讲解 Vue 实例的挂载过程、常见使用场景，并通过实际项目示例进行…...

编程日记 2025/8/3 12:22:44

特征交叉-MaskNet文章总结代码实现

MaskNet 这个模型是微博21年提出的&#xff0c;23年twitter(X)开源的推荐系统排序模块使用的backbone结构。 核心思想是认为DNN为主的特征交叉是addictive&#xff0c;交叉效率不高&#xff1b;所以设计了一种multiplicatvie的特征交叉 如何设计muliplicative特征交叉呢&#x…...

编程日记 2025/8/3 12:15:18

【第八课】Rust中的函数与方法

目录 前言 函数指针 函数当作另一个函数的参数 函数当作另一个函数的返回值 闭包 方法 关联函数 总结 前言 在前面几课中&#xff0c;我们都或多或少的接触到了rust中的函数&#xff0c;rust中的函数和其他语言的并没有什么不同&#xff0c;简单的语法不在这篇文章中赘…...

编程日记 2025/7/31 7:06:45

PyQt飞机大战游戏（附下载地址）

欢迎下载体验&#xff01; 文件大小&#xff1a;22.9 M 下载地址&#xff1a;链接&#xff1a;https://wwrr.lanzoul.com/iybV22frvcng pyqt5-飞机大战 一&#xff0e;前言 up主最近高产&#xff0c;再给大家分享一个博主开发的小游戏-飞机大战&#xff0c;这是一款飞行射击游…...

编程日记 2025/8/1 9:48:14

代替Spinnaker 的 POINTGREY工业级相机 FLIR相机 Python编程案例

SpinnakerSDK_FULL_4.0.0.116_x64 是一个用于FLIR相机的SDK&#xff0c;主要用于图像采集和处理。Spinnaker SDK主要提供C接口&#xff0c;无法直接应用在python环境。本文则基于Pycharm2019python3.7的环境下&#xff0c;调用opencv,EasySpin,PySpin,的库实现POINTGREY工业级相…...

编程日记 2025/7/30 17:06:58

redis模糊匹配key内存分析的脚本

效果&#xff1a; 脚本 与 redis-cli 命令放在同一路径下执行脚本 注意&#xff1a; 1、SCAN 命令仅扫描当前节点的键&#xff0c;若要扫描整个集群中的所有节点&#xff0c;建议在各个从节点上分别执行&#xff1b; 2、为避免扫描对业务产生影响&#xff1a; 可以在从节点或…...

编程日记 2025/8/2 13:34:59

STM32设计学生宿舍监测控制系统-分享

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 本项目旨在利用STM32单片机为核心&#xff0c;结合传感器技术、无线通信技…...

编程日记 2025/8/3 12:15:18

Python爬虫案例八：抓取597招聘网信息并用xlutils进行excel数据的保存

excel保存数据的三种方式&#xff1a; 1、pandas保存excel数据&#xff0c;后缀名为xlsx; 举例&#xff1a; import pandas as pddic {姓名: [张三, 李四, 王五, 赵六],年龄: [18, 19, 20, 21],住址: [广州, 青岛, 南京, 重庆] } dic_file pd.DataFrame(dic) dic_file…...

编程日记 2025/8/3 12:17:25

Mybatis-Day3

规则&#xff1a; 定义与SQL映射文件同名的Mapper接口&#xff0c;并且将Mapper接口和SQL映射文件放置在同一目录下 设置SQL映射我呢见的namespace属性为Mapper接口的全限定名 在Mapper接口中定义方法&#xff0c;方法名就是SQL映射文件中sql语句的id&#xff0c;并保持参数类…...

编程日记 2025/8/3 7:46:50

第六节-AppScan扫描报告

第六节-AppScan扫描报告 1.加载扫描结果 1.点击【打开】 2.选择之前保存过的扫描结果 3.等待加载完成 2.领导查看的报告 1.点击【报告】 2.模板选择为【缺省值】 3.最低严重性选择为【中】&#xff0c;测试类型选择为【应用程序】 4.点击【布局】 5.选择【其他徽标】&#x…...

编程日记 2025/8/3 12:18:03

多模MPO的测试套件

MultiFiber™Pro光功率计及光纤测试工具包 首款支持单模和多模MPO光纤认证的MPO光纤测试仪 利用“扫描全部”功能自动扫描和测试MPO连接器中的所有光纤 支持多模和单模MPO光纤干线 在测试光纤干线时无需使用扇形跳线 以最小的界面显示易懂的结果 用户界面上显示所有12光纤 自动…...

编程日记 2025/7/30 3:34:33

使用php和Xunsearch提升音乐网站的歌曲搜索效果

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/8/1 14:22:32

Idea忽略提交文件、Idea设置文件隐藏、Idea提交时隐藏部分文件、git提交时忽略文件

文章目录 一、在idea中commit文件时隐藏文件方式一&#xff1a;创建.gitignore文件&#xff08;推荐&#xff09;方式二&#xff1a;‌通过File Types设置隐藏文件方式三&#xff1a;通过Git配置忽略文件‌&#xff08;不推荐&#xff09;总结 二、可能遇到的问题2.1、.gitigno…...

编程日记 2025/7/29 17:35:46

菜鸟驿站二维码/一维码 取件识别功能

特别注意需要引入 库文 ZXing 可跳转&#xff1a; 记录【WinForm】C#学习使用ZXing.Net生成条码过程_c# zxing-CSDN博客 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using static System.Net.…...

编程日记 2025/7/22 2:17:08

MQ核心作用、解耦、削峰使用场景详解

说在前面 在如今的高并发互联网应用中&#xff0c;如何确保系统在巨大的流量冲击下还能稳定运行&#xff0c;是每个技术团队都会遇到的挑战。说到这&#xff0c;消息队列&#xff08;MQ&#xff09;就是背后的“大功臣”了。无论是异步处理请求、平滑应对流量高峰&#xff0c;…...

编程日记 2025/8/2 22:51:57

【从零开始的LeetCode-算法】3232. 判断是否可以赢得数字游戏

给你一个 正整数 数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中&#xff0c;Alice 可以从 nums 中选择所有个位数 或 所有两位数&#xff0c;剩余的数字归 Bob 所有。如果 Alice 所选数字之和 严格大于 Bob 的数字之和&#xff0c;则 Alice 获胜。 如果 Alice 能赢得这场游…...

编程日记 2025/8/1 5:45:28

使用LLaMA-Factory微调时的问题与解决方案记录

文章目录 如何指定微调使用的显卡如何解决显卡通信导致的报错模型微调的实际epoch和step如何计算如何实现多卡全量微调模型微调后的结果如何查看模型测试后的指标如何理解如何指定微调使用的显卡 启动网页时使用这种执行命令 CUDA_VISIBLE_DEVICES=5,6,7 llamafactory-cli we…...

编程日记 2025/7/27 12:02:05

一文读懂埋阻埋容工艺

PCB 埋阻埋容工艺是一种在 PCB 板内部埋入电阻和电容的工艺。通常情况下&#xff0c; PCB 上电阻和电容都是通过贴片技术直接焊接在板面上的&#xff0c;而埋阻埋容工艺则将电 阻和电容嵌入到 PCB 板的内部层中&#xff0c;这种印制电路板,其自下而上依次包括第一介电 层,隐埋电…...

编程日记 2025/7/28 11:39:24

What is a Tensor?

WTF is a Tensor? What is the difference between tensors and matrixes?...

编程日记 2025/7/25 19:19:55

提升性能测试效率与准确性：深入解析JMeter中的各类定时器

在软件性能测试领域&#xff0c;Apache JMeter是一款广泛使用的开源工具&#xff0c;它允许开发者模拟大量用户对应用程序进行并发访问&#xff0c;从而评估系统的性能和稳定性。在进行性能测试时&#xff0c;合理地设置请求之间的延迟时间对于模拟真实用户行为、避免服务器过载…...

编程日记 2025/8/2 21:59:56

从繁琐到优雅：用 PyTorch Lightning 简化深度学习项目开发

从繁琐到优雅&#xff1a;用 PyTorch Lightning 简化深度学习项目开发 在深度学习开发中&#xff0c;尤其是使用 PyTorch 时&#xff0c;我们常常需要编写大量样板代码来管理训练循环、验证流程和模型保存等任务。PyTorch Lightning 作为 PyTorch 的高级封装库&#xff0c;帮助…...

编程日记 2025/8/3 12:18:05

Python学习32天

Self #比较两个人信息&#xff0c;完全相等输出True,否则输出False class Person(): nameNone ageNone def compare_to(self,other): return self.nameother.name and self.ageother.age man1Person() man1.name"tim" man1.age3 man2Person man…...

编程日记 2025/8/3 12:18:26

云原生学习

1、云原生学习 文章目录 1、云原生学习1. 介绍2. Docker容器化 1. 介绍 什么是云原生&#xff1f;原生指使用JAVA等语言编写的项目&#xff0c;云是指将项目部署到云服务器上云平台&#xff1a;公有云、私有云 本地平台是指直接部署在自己计算机&#xff0c;而开发的应用一定要…...

编程日记 2025/8/1 15:09:52

django从入门到精通（六）——auth认证及自定义用户

Django 提供了一个强大的用户认证系统&#xff0c;允许开发者轻松管理用户的注册、登录、权限和组等功能。以下是对 Django 用户认证系统的详细介绍&#xff0c;包括默认的用户认证、自定义用户认证和权限设置。 1. 默认用户认证 1.1 用户模型 Django 默认提供了一个用户模型…...

编程日记 2025/8/3 12:17:25

影响电阻可靠性的因素

一、影响电阻可靠性的因素&#xff1a; 影响电阻可靠性的因素有温度系数、额定功率&#xff0c;最大工作电压、固有噪声和电压系数 &#xff08;一&#xff09;温度系数 电阻的温度系数表示当温度改变1摄氏度时&#xff0c;电阻阻值的相对变化&#xff0c;单位为ppm/C.电阻温度…...

编程日记 2025/8/2 13:10:01

大数运算（加减乘除和输入、输出模块）

为什么会有大数呢&#xff1f;因为long long通常为64位范围约为 -9,223,372,036,854,775,808 到 9,223,372,036,854,775,807&#xff0c;最多也就19位&#xff0c;那么超过19位的如何计算呢&#xff1f;这就引申出来大数了。 本博客适合思考过这道题&#xff0c;但是没做出来或…...

编程日记 2025/8/3 12:18:04

HTML5超酷响应式视频背景动画特效(六种风格，附源码)

文章目录 1.设计来源1.1 大气蓬勃动态背景界面效果1.2 星空闪闪动态背景界面效果1.3 眼神深眸动态背景界面效果1.4 星空银河动态背景界面效果1.5 花开花落动态背景界面效果1.6 海底世界动态背景界面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开…...

编程日记 2025/8/3 12:17:23

堆优化版本的Prim

prim和dijkstra每轮找最小边的松弛操作其实是同源的&#xff0c;因而受dijkstra堆优化的启发&#xff0c;那么prim也可以采用小根堆进行优化。时间复杂度也由 O ( n 2 ) O(n^2) O(n2)降为 O ( n l o g n ) O(nlogn) O(nlogn)。 测试一下吧&#xff1a;原题链接 #include <i…...

编程日记 2025/8/3 12:17:24

【视觉SLAM】4b-特征点法估计相机运动之PnP 3D-2D

文章目录 0. 前言1. PnP求解1.1 直接线性变换DLT1.2 P3P1.3 光束平差法BA2. 实现0. 前言 透视n点（Perspective-n-Point，PnP）问题是计算机视觉领域的经典问题，用于求解3D-2D的点运动。换句话说，当知道 N N N个世界坐标系中3D空间点的坐标以及它们在图像上的投影点像素坐标…...

编程日记 2025/8/3 12:14:05

JDK1.8中JVM堆内存等参数配置

在JDK 8中&#xff0c;JVM内存模型主要包括堆内存&#xff08;Heap Memory&#xff09;、元空间&#xff08;Metaspace&#xff09;以及直接内存&#xff08;Direct Memory&#xff09;。以下是一些常用的JVM内存参数配置建议&#xff0c;特别是在JDK 8环境下&#xff1a; 1. …...

编程日记 2025/7/29 23:07:03

【C++】深入哈希表核心：从改造到封装，解锁 unordered_set 与 unordered_map 的终极奥义！

文章目录 修改哈希表模板参数迭代器HashTable 的默认成员函数HashTable 迭代器相关函数HashTable 的 Insert 函数HashTable 的 Find函数HashTable 的 Erase函数 封装 unordered_set封装 unordered_map测试 unordered_set 和 unordered_map 修改哈希表 我们基于链地址法实现的哈…...

编程日记 2025/7/29 11:03:08

蓝桥杯模拟

【问题描述】 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结果填空的题&#xff0c;你只需要算出结果后提交即可。本题的结果为一个整数&#xff0c;在提交答案时只…...

编程日记 2025/7/30 12:46:38

16. 【.NET 8 实战--孢子记账--从单体到微服务】--汇率获取定时器

这篇文章我们将一起编写这个系列专栏中第一个和外部系统交互的功能&#xff1a;获取每日汇率。下面我们一起来编写代码吧。 一、需求 根据文章标题可知&#xff0c;在这片文章中我们只进行汇率的获取和写入数据库。 编号需求说明1获取每日汇率1. 从第三方汇率API中获取汇率信…...

编程日记 2025/8/1 20:00:25

移动充储机器人“小奥”的多场景应用（上）

一、高速公路服务区应用 在高速公路服务区&#xff0c;新能源汽车的充电需求得到“小奥”机器人的及时响应。该机器人配备有储能电池和自动驾驶技术&#xff0c;能够迅速定位至指定充电点&#xff0c;为待充电的新能源汽车提供服务。得益于“小奥”的机动性&#xff0c;其服务…...

编程日记 2025/7/31 1:25:58

【Android】Service使用方法：本地服务 / 可通信服务 / 前台服务 / 远程服务（AIDL）

1 本地Service 这是最普通、最常用的后台服务Service。 1.1 使用步骤 步骤1&#xff1a;新建子类继承Service类&#xff1a;需重写父类的onCreate()、onStartCommand()、onDestroy()和onBind()方法步骤2&#xff1a;构建用于启动Service的Intent对象步骤3&#xff1a;调用st…...

编程日记 2025/8/2 13:44:03

Qt文件目录操作

文件目录操作相关类 Qt 为文件和目录操作提供了一些类&#xff0c;利用这些类可以方便地实现一些操作。Qt 提供的与文件和目录操作相关的类包括以下几个&#xff1a; QCoreApplication&#xff1a;用于提取应用程序路径&#xff0c;程序名等文件信息&#xff1b;QFile&#x…...

编程日记 2025/7/28 4:25:19

刷题-1122

1. 蛇形矩阵是由1开始的自然数依次排列成的一个矩阵上三角形。 例如&#xff0c;当输入5时&#xff0c;应该输出的三角形为&#xff1a; 1 3 6 10 15 2 5 9 14 4 8 13 7 12 11 import sys def generate_snake_matrix(n):matrix [[0]*n for _ in range(n)]curent_num 1…...

编程日记 2025/7/31 18:13:57

【通俗理解】Jensen不等式与变分分布q(z)在积分计算中的应用

【通俗理解】Jensen不等式与变分分布q(z)在积分计算中的应用 关键词提炼 #Jensen不等式 #变分分布 #积分计算 #期望 #凸函数 #优化问题 #下界估计 #机器学习 第一节&#xff1a;Jensen不等式与变分分布的类比与核心概念【尽可能通俗】 Jensen不等式就像是一个“积分计算器”…...

编程日记 2025/7/30 20:59:44

微信小程序2-地图显示和地图标记

一、index修改页面&#xff0c;让页面能够显示地图和一个添加标记的按钮。 index.wxml <scroll-view class"scrollarea" scroll-y type"list"><view class"index_container"><map id"map" style"width: 100%; h…...

编程日记 2025/8/1 15:40:00

webpack配置和打包性能优化

文章目录 webpack基础配置loaderpluginloader 和 plugin 的区别devServer打包性能优化1、按需引入组件2、externals 属性3、给定文件匹配范围4、noParse 属性5、cacheDirectory 缓存属性6、happyPack 多个子进程并行 webpack基础配置 mode:development&#xff1a;设置webpack…...

编程日记 2025/8/3 1:25:56

iframe嵌入踩坑记录

iframe嵌入父子页面token问题 背景介绍 最近在做在平台A中嵌入平台B某个页面的需求&#xff0c;我负责的是平台B这边&#xff0c;使这个页面被嵌入后能正常使用。两个平台都实现了单点登录。 其实这是第二次做这个功能了&#xff0c;原本以为会很顺利&#xff0c;但没想到折腾…...

编程日记 2025/7/31 16:53:27

FreeRTOS——消息队列

目录 一、概念及其作用 1.1概念 1.2特点 1.3工作原理 二、相关API 2.1创建队列 2.2任务中写队列 2.3任务中读队列 2.4中断中写队列 2.5中断中读队列 三、实现原理 3.1消息队列控制块 3.2消息队列的创建 3.3消息的发送 3.3.1任务中发送 3.3.2中断中发送 3.4消息的…...

编程日记 2025/8/2 20:01:07

c++11的动态类型

c17引入了any 和 variant&#xff0c;可以将任意数据类型统一用any或variant类型表示&#xff0c;在开发中还是能够带来很多便利的。在c11版本中&#xff0c;可以用下面这个例子&#xff0c;仿照实现一个Any类型。 #include <iostream> #include <stdexcept> #inc…...

编程日记 2025/8/1 8:08:37

大语言模型---Llama模型文件介绍；文件组成

文章目录 1. 概要2. 文件组成 1. 概要 在使用 LLaMA&#xff08;Large Language Model Meta AI&#xff09;权重时&#xff0c;通常会涉及到与模型权重存储和加载相关的文件。这些文件通常是以二进制格式存储的&#xff0c;具有特定的结构来支持高效的模型操作。以下以Llama-7…...

编程日记 2025/7/31 7:52:00

常见网络厂商设备默认用户名/密码大全

常见网络厂商的默认用户名/密码 01 思科 (Cisco) 设备类型&#xff1a;路由器、交换机、防火墙、无线控制器 默认用户名&#xff1a;cisco 默认密码&#xff1a;cisco 设备类型&#xff1a;网管型交换机 默认用户名&#xff1a;admin 默认密码&#xff1a;admin 02 华…...

编程日记 2025/7/29 19:30:37

【大数据分析机器学习】分布式机器学习

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…...

编程日记 2025/7/31 22:28:25

Go 语言已立足主流，编程语言排行榜24 年 11 月

Go语言概述 Go语言&#xff0c;简称Golang&#xff0c;是由Google的Robert Griesemer、Rob Pike和Ken Thompson在2007年设计&#xff0c;并于2009年11月正式宣布推出的静态类型、编译型开源编程语言。Go语言以其提高编程效率、软件构建速度和运行时性能的设计目标&#xff0c;…...

编程日记 2025/8/2 13:44:15

数字反向输出

数字反向输出 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 小明听到广播里的数字后&#xff0c;总喜欢反着念给妈妈听。请聪明的你将小明听到的数字反向输出。 输入 输入为一个整型的四位数n 输出 …...

编程日记 2025/7/28 11:41:59

c++ std::stack总结

概念 std::stack 是 C 标准库中的一个容器适配器&#xff08;Container Adapter&#xff09;。它通常是基于其他容器&#xff08;如 std::deque 或 std::vector&#xff09;实现的&#xff0c;提供了一个后进先出&#xff08;LIFO&#xff0c;Last In First Out&#xff09;的…...

编程日记 2025/7/29 21:41:51

【C++习题】10.反转字符串中的单词 lll

题目&#xff1a; 链接&#x1f517;&#xff1a;557.反转字符串中的单词 lll 题目&#xff1a; 代码&#xff1a; class Solution { public:void Reverse(string &s, int start, int end){char tmp;while(start < end){tmp s[start];s[start] s[end];s[end] tmp;…...

编程日记 2025/8/3 11:21:03