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

vue源码分析(四)——vue 挂载($mount)的详细过程

文章目录

  • 前言
  • 一、使用Runtime+Compiler解析$mount的原因
  • 二、$mount 解析的详细过程
    • 1.解析挂载的#app执行了vm.$mount
    • 2. 通过$mount方法执行以下文件的mount方法
    • 3. 执行util工具文件夹中的query方法
    • 4. 执行query方法后返回$mount方法判断el是否是body
    • 5. 判断!options.render
      • (1)options.render是否为真
      • (2)判断是否使用了template
      • (3)判断是否是el
      • (4)返回的 mount 的方法
    • 6. 解析mountComponent方法
  • 总结


前言

Runtime Only 和 Runtime+Compiler的区别
通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候会询问我们用Runtime Only 版本的还是 Runtime+Compiler 版本。
Runtime Only:我们在使用 Runtime Only 版本的 Vue.js 的时候,通常需要借助如 webpack的 vue-loader 工具把 .vue 文件编译成 JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,因此代码体积也会更轻量。
Runtime+Compiler:我们如果没有对代码做预编译,但又使用了 Vue 的 template 属性并传入一个字符串,则需要在客户端编译模板。如下所示:

// 需要编译器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})
// 这种情况不需要
new Vue({render (h) {return h('div', this.hi)
}

因为在 Vue.js 2.0 中,最终渲染都是通过 render 函数,如果写 template 属性,则需要编译成 render 函数,那么这个编译过程会发生运行时,所以需要带有编译器的版本。
很显然,这个编译过程对性能会有一定损耗,所以通常我们更推荐使用Runtime-Only 的 Vue.js。


一、使用Runtime+Compiler解析$mount的原因

Vue中我们通过 $mount 方法去挂载vm,而 $mount 方法在多个文件中都有定义。如源码 src\platforms\web\runtime\index.ts src\platforms\web\runtime-with-compiler.ts 等文件。由于使用纯前端的方式分析源码,所以我这里分析 Compiler 版本的 $mount,有利于对原理深入的理解。

src\platforms\web\runtime\index.ts的方法较为简单,如下图
在这里插入图片描述

二、$mount 解析的详细过程

1.解析挂载的#app执行了vm.$mount

在这里插入图片描述

2. 通过$mount方法执行以下文件的mount方法

路径:src\platforms\web\runtime-with-compiler.ts
在这里插入图片描述

3. 执行util工具文件夹中的query方法

路径:src\platforms\web\util\index.ts
也就是main.js 中el: ‘#app’ 传入的话,就会执行1.1获取对应的元素
在这里插入图片描述

4. 执行query方法后返回$mount方法判断el是否是body

在这里插入图片描述

5. 判断!options.render

在这里插入图片描述

(1)options.render是否为真

下一章节会详细讲解

(2)判断是否使用了template

也就是使用Runtime Only 需要编译的写法,这个在前言中详细说明了,可以返回顶部详细看看。

// 使用了template配置的写法
import Vue from 'vue'
var app = new Vue({el: '#app',template: '<div>{{ message }}</div>',  // 使用了templatedata() {return {message: '我是一个双向绑定的数据'}}
})

(3)判断是否是el

如果是el,就执行getOutHtml方法,获取main.js中el的id名的div元素
在这里插入图片描述

(4)返回的 mount 的方法

在这里插入图片描述
路径:src\platforms\web\runtime\index.ts
在这里插入图片描述

6. 解析mountComponent方法

路径 src\core\instance\lifecycle.ts
执行updateComponent方法,通过Watcher根据数据更新执行。感兴趣可以查看Watcher里面的配置即可。

在这里插入图片描述


总结

这就是$mount 挂载的过程

相关文章:

vue源码分析(四)——vue 挂载($mount)的详细过程

文章目录 前言一、使用RuntimeCompiler解析$mount的原因二、$mount 解析的详细过程1.解析挂载的#app执行了vm.$mount2. 通过$mount方法执行以下文件的mount方法3. 执行util工具文件夹中的query方法4. 执行query方法后返回$mount方法判断el是否是body5. 判断!options.render&…...

真机环境配置教程

1.下载安装包 https://developers.google.com/android/images 2.刷机教程 Xposed精品连载 | 一篇文章彻底搞定安卓刷机与Root 3.配置root...

新电脑第一次重启后蓝屏

新电脑第一次重启后蓝屏 悲惨事故&#xff0c;远程参加插电第一次开机&#xff0c;按“FNShiftF10”启动cmd窗口输入oobe\bypassnro 回车重启跳过网络连接&#xff0c;设置一个用户名密码设置为空&#xff0c;不设密码确定&#xff0c;进入系统软件操作磁盘操作&#xff08;磁盘…...

k8s statefulSet 学习笔记

文章目录 缩写: stsweb-sts.yaml创建sts扩缩容金丝雀发布OnDelete 删除时更新 缩写: sts 通过 kubectl api-resources 可以查到&#xff1a; NAMESHORTNAMESAPIVERSIONNAMESPACEDKINDstatefulsetsstsapps/v1trueStatefulSet web-sts.yaml apiVersion: v1 kind: Service met…...

gitlab 通过变量连接自建K8S

services:- docker:19.03.7-dind- golang:1.17.8-alpine3.15- docker:stable stages:- package- build and push docker image- deploy variables:KUBECONFIG: /etc/deploy/config build:tags:- k8simage: golang:1.17.8-alpine3.15stage: package# 只作用在main分支only:- mai…...

LuatOS-SOC接口文档(air780E)--mcu - 封装mcu一些特殊操作

常量 常量 类型 解释 mcu.UART number 外设类型-串口 mcu.I2C number 外设类型-I2C mcu.SPI number 外设类型-SPI mcu.PWM number 外设类型-PWM mcu.GPIO number 外设类型-GPIO mcu.I2S number 外设类型-I2S mcu.LCD number 外设类型-LCD mcu.CAM num…...

第14期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…...

【数据结构】优先级队列

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; PriorityQueue 1. 什么是优先级队列…...

c语言宏相关高级用法

outline all可变参数宏c语言内置函数1.__typeof__2.__builtin_choose_expr all 记录一些c语言宏相关的高级用法 可变参数宏 c语言内置函数 1.typeof 2.__builtin_choose_expr 语法格式 type __builtin_choose_expr (const_exp, exp1, exp2)解释 这个函数的第一个参数必须…...

新款模块上线实现SIP模块与扩拨电话之间打点与喊话功能 IP矿用电话模块SV-2800VP

新款模块上线实现SIP模块与扩拨电话之间打点与喊话功能 IP矿用电话模块SV-2800VP 一、简介 SV-2800VP系列模块是我司设计研发的一款用于井下的矿用IP音频传输模块&#xff0c;可用此模块打造一套低延迟、高效率、高灵活和多扩展的IP矿用广播对讲系统&#xff0c;亦可对传统煤…...

前端开发---在vue项目中使用openLayers

前端开发之在vue项目中使用openLayers 前言效果图在vue中渲染地图安装ol插件1、调用插件2、 初始话地图3、地图点击事件4、重置坐标5、通过坐标改变视图6、保存坐标点 vue中使用的源码 前言 本篇文章主要讲解openLayers的初步使用&#xff0c;包括渲染地图、获取点坐标、标记点…...

C语言之结构体和共用体详解

目录 结构体 结构体的定义和使用 结构体数组的使用 结构体指针的使用 结构体大小的计算 共用体 共用体的定义和使用 typedef用法详解 enum枚举类型 结构体 结构体的定义和使用 C语言的结构体&#xff08;Struct&#xff09;是一种自定义的数据类型&#xff0c;它允许…...

iOS插件

把平时看到或项目用到的一些插件进行整理&#xff0c;文章后面分享一些不错的实例&#xff0c;若你有其它的插件欢迎分享&#xff0c;不断的进行更新&#xff1b; 一&#xff1a;第三方插件 1:基于响应式编程思想的oc 地址&#xff1a;https://github.com/ReactiveCocoa/Rea…...

Maven第四章:配置文件详解

Maven第四章:配置文件详解 前言 本章重点知识:掌握setting.xml配置文件以及pom.xml配置文件 setting.xml配置文件 setting.xml文件用于配置Maven的运行环境,包括本地仓库的位置、镜像仓库的配置、认证信息等。以下是setting.xml文件的详细说明: 文件位置: 全局配置文件:…...

计算机网络基础一

任务背景 由于某些原因&#xff0c;某公司搬迁至新地方&#xff0c;现需要对公司网络环境重新调整规划&#xff0c;申请了一个 B 类 IP 地址 : 172.25.0.0 &#xff0c;子 网掩码为 255.255.224.0 。需要根据公司部门和电脑数进行子网划分并分配 IP 。公司目前有 6 个部门&am…...

搜维尔科技:Touch触觉式力反馈设备与Touch X力反馈设备对比分析

此2款力反馈为最常用的力反馈设备...

SAP保持系统长时间在线

保持系统长时间在线 保持SAP系统长长时间在线不掉线&#xff0c;通过代码&#xff0c;保持一个页面一直在线&#xff0c;ABAP代码如下: *&---------------------------------------------------------------------* *& Report ZGUI *&----------------------------…...

威联通NAS进阶玩法之使用Docker搭建个人博客教程

Hello大家好&#xff0c;本篇教程主要教大家在威联通的NAS上搭建属于自己的个人博客网站&#xff0c;首先介绍一下我使用的机器&#xff0c;四盘位威联通TS-464C2&#xff0c;搭载四核四线程的N5095处理器&#xff0c;支持4K60帧的输出以及PCIE3.0,可玩性还是非常高的。废话不多…...

模型对象CSS2DObject始终在画布的左上角(问题解决)

写了个简单案例模拟一下这个问题&#xff0c;看下图片 下面看下c2渲染器相关代码部分 this.css2DRenderer new CSS2DRenderer(); this.css2DRenderer.render(this.scene, this.camera); this.css2DRenderer.setSize(width, height); this.css2DRenderer.domElement.style.pos…...

LabVIEW开发基于图像处理的车牌检测系统

LabVIEW开发基于图像处理的车牌检测系统 自动车牌识别的一般步骤是图像采集、去除噪声的预处理、车牌定位、字符分割和字符识别。结果主要取决于所采集图像的质量。在不同照明条件下获得的图像具有不同的结果。在要使用的预处理技术中&#xff0c;必须将彩色图像转换为灰度&am…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...