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

Vue组件是怎样挂载的

news 2026/2/9 20:34:29

我们先来关注一下$mount是实现什么功能的吧：
在这里插入图片描述

我们打开源码路径core/instance/init.js:

export function initMixin (Vue: Class<Component>) {......initLifecycle(vm)// 事件监听初始化initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm) // resolve injections before data/props//初始化vm状态 prop/data/computed/watch完成初始化initState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, 'created')......// 配置项里有el属性, 则会挂载到真实DOM上, 完成视图的渲染// 这里的$mount方法，本质上调用了core/instance/liftcycle.js中的mountComponent方法if (vm.$options.el) {vm.$mount(vm.$options.el)}}
}

在这里我们怎么理解这个挂载状态呢？先来看Vue官方给的一段描述

  • 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。
  • 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
  • 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素。
  • 并且你必须使用原生DOM API 把它插入文档中。
    那我们来看一下$mount内部机制吧：
 * 缓存之前的$mount的方法以便后面返回实例，*/
const mount = Vue.prototype.$mount
/** * 手动地挂载一个未挂载的根元素，并返回实例自身(Vue实例) */
Vue.prototype.$mount = function (el?: string | Element,  hydrating?: boolean
): Component {el = el && query(el)/* istanbul ignore if *//**   * 挂载对象不能为body和html标签   */if (el === document.body || el === document.documentElement) {process.env.NODE_ENV !== 'production' && warn(`Do not mount Vue to <html> or <body> - mount to normal elements instead.`)return this}const options = this.$options// resolve template/el and convert to render function/**   * 判断$options是否有render方法    * 有：判断是String还是Element，获取他们的innerHTMl   * 无：在实例Vue时候在vnode里创建一个创建一个空的注释节点 见方法createEmptyVNode   */if (!options.render) {let template = options.templateif (template) {if (typeof template === 'string') {if (template.charAt(0) === '#') {template = idToTemplate(template)/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && !template) {warn(`Template element not found or is empty: ${options.template}`,this)}}/**       * 获取的Element的类型       * 详细见   https://developer.mozilla.org/zh-CN/docs/Web/API/Element/outerHTML       */} else if (template.nodeType) {template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)}return this}} else if (el) {template = getOuterHTML(el)}if (template) {/* istanbul ignore if *//**       * 用于监控compile 的性能        */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile')}// 如果不存在 render 函数，则会将模板转换成render函数const { render, staticRenderFns } = compileToFunctions(template, {shouldDecodeNewlines,shouldDecodeNewlinesForHref,delimiters: options.delimiters,comments: options.comments}, this)options.render = renderoptions.staticRenderFns = staticRenderFns/* istanbul ignore if *//**       * 用于监控compile 的性能       */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')measure(`vue ${this._name} compile`, 'compile', 'compile end')}}}return mount.call(this, el, hydrating)
}

而$mount实现的是mountComponent函数功能

// public mount method
Vue.prototype.$mount = function (el?: string | Element,  hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefinedreturn mountComponent(this, el, hydrating)
}

那么我们再去找一下mountComponent函数吧：

export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean
): Component {vm.$el = el// 如果不存在render函数，则直接创建一个空的VNode节点if (!vm.$options.render) {vm.$options.render = createEmptyVNodeif (process.env.NODE_ENV !== 'production') {/* istanbul ignore if */if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||vm.$options.el || el) {warn('You are using the runtime-only build of Vue where the template ' +'compiler is not available. Either pre-compile the templates into ' +'render functions, or use the compiler-included build.',vm)} else {warn('Failed to mount component: template or render function not defined.',vm)}}}// 检测完render后，开始调用beforeMount声明周期callHook(vm, 'beforeMount')let updateComponent/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {updateComponent = () => {const name = vm._nameconst id = vm._uidconst startTag = `vue-perf-start:${id}`const endTag = `vue-perf-end:${id}`mark(startTag)const vnode = vm._render()mark(endTag)measure(`vue ${name} render`, startTag, endTag)mark(startTag)vm._update(vnode, hydrating)mark(endTag)measure(`vue ${name} patch`, startTag, endTag)}} else {updateComponent = () => {// 这里是上面所说的观察者，这里注意第二个expOrFn参数是一个函数// 会在new Watcher的时候通过get方法执行一次// 也就是会触发第一次Dom的更新vm._update(vm._render(), hydrating)}}vm._watcher = new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)hydrating = false//触发$mount函数if (vm.$vnode == null) {vm._isMounted = truecallHook(vm, 'mounted')}return vm
}

总结来说就是:

  • 执行vm._watcher = new Watcher(vm, updateComponent, noop)。
  • 触发Watcher里面的get方法，设置Dep.target = watcher。
  • 执行updateComponent。
    这个过程中，会去读取我们绑定的数据,由于之前我们通过Observer进行了数据劫持，这样会触发数据的get方法。此时会将watcher添加到 对应的dep中。当有数据更新时，通过dep.notify()去通知到Watcher，然后执行Watcher中的update方法。此时又会去重新执行 updateComponent，至此完成对视图的重新渲染。

我们着重关注一下vm._update(vm._render(), hydrating):

...let vnodetry {vnode = render.call(vm._renderProxy, vm.$createElement)} catch (e) {handleError(e, vm, `render`)// return error render result,// or previous vnode to prevent render error causing blank component/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {if (vm.$options.renderError) {try {vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)} catch (e) {handleError(e, vm, `renderError`)vnode = vm._vnode}} else {vnode = vm._vnode}} else {vnode = vm._vnode}}

我们看到有俩个方法vm._renderProxy代理vm，要来检测render是否用了vm上没有的属性与方法，用来报错，vm.$createElement则是创建VNode:

参考 前端进阶面试题详细解答

render: function (createElement) {return createElement('h1', '标题')
}

数据我们是知道怎么更新的，那么组件tamplate到真实dom是怎么更新的呢？
在这里插入图片描述

  • 解析tamplate生成字符串
  • render Function处理字符串生成VNode
  • patch diff算法处理VNode

相关文章：

Vue组件是怎样挂载的

我们先来关注一下$mount是实现什么功能的吧&#xff1a; 我们打开源码路径core/instance/init.js: export function initMixin (Vue: Class<Component>) {......initLifecycle(vm)// 事件监听初始化initEvents(vm)initRender(vm)callHook(vm, beforeCreate)initInject…...

编程日记 2023/2/27 16:14:25

gcc: 编译选项：-fdelete-null-pointer-checks、-fno-delete-null-pointer-checks

文章目录 说明实例：Linux 里的使用chatGPT说明 这个说明写的有些理解不了，可能还是不太理解（有未知的东西在里面？）。但是从这个编译选项的命名上来看还是非常明确，就是删除不必要的空指针检查。使用时要小心了，这个优化超出了编译的界限！ -fdelete-null-pointer-check…...

编程日记 2023/2/27 16:13:19

周赛334（前缀和、贪心+双指针、Dijkstra求最短路径、二分答案）

文章目录[6369. 左右元素和的差值](https://leetcode.cn/problems/left-and-right-sum-differences/)前缀和[6368. 找出字符串的可整除数组](https://leetcode.cn/problems/find-the-divisibility-array-of-a-string/)超长整数如何取余&#xff1f;[6367. 求出最多标记下标](ht…...

编程日记 2023/2/27 16:12:09

imx6ull——I2C驱动

I2C基本介绍 SCL 为高电平&#xff0c;SDA 出现下降沿:起始位 SCL 位高电平&#xff0c;SDA出现上升沿:停止位 主机——从机地址&#xff08;ack&#xff09;——寄存器地址&#xff08;ack&#xff09;——数据&#xff08;ack&#xff09; 重点&#xff1a;先是写&#xff0c…...

编程日记 2023/2/27 16:11:02

Spring Cache的基本使用与分析

概述 使用 Spring Cache 可以极大的简化我们对数据的缓存&#xff0c;并且它封装了多种缓存&#xff0c;本文基于 redis 来说明。 基本使用 1、所需依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-…...

编程日记 2023/2/27 16:09:55

【安全知识】——端口复用隐藏后门

作者名&#xff1a;白昼安全主页面链接&#xff1a; 主页传送门创作初心&#xff1a; 以后赚大钱座右铭&#xff1a; 不要让时代的悲哀成为你的悲哀专研方向&#xff1a; web安全&#xff0c;后渗透技术每日鸡汤&#xff1a; 精彩的人生是在有限的生命中实现无限价值端口复用是…...

编程日记 2023/2/27 16:08:47

Tina_Linux量产测试使用指南_new

OpenRemoved_Tina_Linux_量产测试_使用指南_new 1 概述 文档主要描述如何配置tinatest 并搭建量产测试环境。 1.1 编写目的 • 介绍量产配置方法&#xff1b; • 介绍量产测试环境搭建流程&#xff1b; • 介绍如何使用dragonMAT 软件&#xff1b; • 方便开发人员按照说明…...

编程日记 2023/2/27 16:07:40

STC32单片机 普通 I/O 口中断功能介绍和使用

STC32单片机 普通 I/O 口中断功能和使用✨STC32单片机普通 I/O 口中断&#xff0c;不是传统外部中断. &#x1f516;手册上描述&#xff1a;STC32G 系列支持所有的 I/O 中断&#xff0c;且支持 4 种中断模式&#xff1a;下降沿中断、上升沿中断、低电平中断、高电平中断。每组 …...

编程日记 2023/2/27 16:06:35

计算机学生如何找到第一份实习？

作为一名计算机专业的学生&#xff0c;找到第一份实习是非常重要的一步&#xff0c;它不仅可以帮助你更好地了解行业&#xff0c;增加实践经验&#xff0c;还可以为即将到来的校招提供有力支持。计算机专业的校招&#xff0c;每年都在变得越来越卷。5年前&#xff0c;可能你只要…...

编程日记 2023/2/27 16:05:28

《Python机器学习》基础代码

1&#xff0c;要学习Python机器学习,第一步就是读入数据,这里我们以读入excel的数据为例,利用jupyter notebook来编码,具体教程看这个视频 推荐先上传到jupyter notebook,再用名字.xlsx来导入 Jupyter notebook导入Excel数据的两种方法介绍_哔哩哔哩_bilibili 2&#xff0c;…...

编程日记 2023/2/27 16:04:18

【前端】JS异步加载

文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载 两个原因其实是一个意思。 原因1&#xff1a; JS是单线程的语言&#xff0c;它会同步的执行代码&#xff0c;从上往下执行 但是&#xff0c;一旦网络不好&#xff0c;或要加载的js文件过大的话&#xff0c;会…...

编程日记 2023/2/27 16:03:11

【MySQL】SQL语言的五个部分

DQL 数据查询语言&#xff08;Data Query Language&#xff0c;DQL&#xff09;&#xff1a;DQL主要用于数据的查询&#xff0c;其基本结构是使用SELECT子句&#xff0c;FROM子句和WHERE子句的组合来查询一条或多条数据。 DML 数据操作语言&#xff08;Data Manipulation La…...

编程日记 2023/2/27 16:02:03

详细的IO面试题汇总

IO 流简介 IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因此称为 IO 流。IO 流在…...

编程日记 2023/2/27 16:00:54

在Linux终端管理你的密码！

大家好&#xff0c;我是良许。 现在是互联网时代&#xff0c;我们每天都要跟各种 APP 、网站打交道&#xff0c;而这些东西基本上都需要注册才可以使用。 但是账号一多&#xff0c;我们自己都经常记不清对应的密码了。有些小伙伴就一把梭&#xff0c;所有的账号密码都是一样。…...

编程日记 2023/2/27 15:59:45

【设计模式】策略模式在Java工程中应用

在之前的文章中&#xff0c;曾经给大家介绍过策略模式&#xff1a;【设计模式】策略模式&#xff0c;在该篇文章中&#xff0c;我们曾很清楚的说到&#xff0c;策略模式主要解决的问题是&#xff1a;在有多种算法相似的情况下&#xff0c;解决使用 if...else 所带来的复杂和难以…...

编程日记 2023/2/27 15:58:36

Linux驱动开发工程师需要掌握哪些技能？

一、前言 Linux驱动开发是一项高度技术性的工作&#xff0c;需要深厚的编程技能和对计算机硬件的深入理解。随着物联网、人工智能等领域的快速发展&#xff0c;Linux驱动开发工程师的需求日益增加。在这篇文章中&#xff0c;我将为您介绍一条Linux驱动开发工程师的学习路线&am…...

编程日记 2023/2/27 15:57:26

【人脸识别】FROM：提升遮挡状态下的人脸识别效果

论文题目&#xff1a;《End2End Occluded Face Recognition by Masking Corrupted Features》 论文地址&#xff1a;https://arxiv.org/pdf/2108.09468v3.pdf 代码地址&#xff1a;https://github.com/haibo-qiu/from 1.前言 人脸识别技术已经取得了显著的进展&#xff0c;主要…...

编程日记 2023/2/27 15:56:17

浏览器缓存

什么是缓存? 当第一次访问网站的时候,比如www.baidu.com,电脑会图片,文件等下载下来,当第二次访问网站的时候,网站就会直接被加载出来. 缓存的好处? 减轻服务器压力,减少请求的放松.提高性能,在本地打开资源肯定比在服务器上获取要快减少宽带的消耗,当我们使用缓存时,只会…...

编程日记 2023/2/27 15:55:05

【软考 系统架构设计师】论文范文③ 论数据访问层设计技术及其应用

>>回到总目录<< 文章目录 论数据访问层设计技术及其应用范文摘要正文论数据访问层设计技术及其应用 在信息系统的开发与建设中，分层设计是一种常见的架构设计方法，区分层次的目的是为了实现“高内聚低耦合”的思想。分层设计能有效简化系统复杂性，使设计结构清…...

编程日记 2023/2/27 15:53:55

802.11 MCS 的最低SNR分析

常常看到这样的表格： 那么这个SNR如何而来？ 看看RSSI和SNR的关系，它们之间隔了一个noise floor。从表格看得出，这个底噪在-80~-90之间。 而SNR的核心，也有类似的原因，它和BER有关。...

编程日记 2023/2/27 15:52:47

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

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

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

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

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

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

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

编程新知 2025/11/25 6:49:02

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2026/1/29 11:06:33

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10