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 挂载的过程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android原生项目集成uniMPSDK(Uniapp)遇到的报错总结

uni小程s序SDK 集成到Android原生项目:老项目中用到的库较多&#xff0c;会出现几种冲突问题&#xff0c;总结如下&#xff1a; 报错1&#xff1a; Execution failed for task :app:processDebugManifest. > Manifest merger failed with multiple errors, see logs Andro…

初识HTML超文本标记语言

文章目录 前端简介引入前端三剑客什么是HTML&#xff1f;超文本传输协议前戏HTTP超文本传输协议1.什么是HTTP协议2.四大特性3.数据格式4.响应状态码 基于HTTP协议搭建HTMLHTML简介 前端简介 引入 前端&#xff1a;与用户直接打交道的操作界面都可以称之为前端(那些炫酷的页面)…

【每日一题】补档 CF487B. Strip | 数据结构杂烩 -> 单调队列 | 困难

题目内容 原题链接 给定一个长度为 n n n 的数组&#xff0c;将这个数组进行拆分成若干个连续子数组&#xff0c; 使得每个子数组的最大值减去最小值小于等于 s s s &#xff0c; 且每个子数组的长度大于等于 l e n len len 。 问最少可以拆分成多少个连续子数组&#xff0…

计算机视觉注意力机制小盘一波 (学习笔记)

将注意力的阶段大改分成了4个阶段 1.将深度神经网络与注意力机制相结合&#xff0c;代表性方法为RAM ⒉.明确预测判别性输入特征&#xff0c;代表性方法为STN 3.隐性且自适应地预测潜在的关键特征&#xff0c;代表方法为SENet 4.自注意力机制 通道注意力 在深度神经网络中…

TypeScript - 枚举 - 数字枚举

什么是枚举 枚举就是有固定的元素的一个对象。 对象的元素可以直接列举出来。 什么是数字枚举 数字枚举&#xff0c;就是我们通俗意义上的枚举类型。 定义的元素是与数字一一对应的。 特点 默认从0开始&#xff0c;步长为1 递增 可以指定值&#xff0c;后面的以步长为1&#xf…

Android问题笔记四十一:JNI NewStringUTF错误的几种解决方案

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

【游戏开发】【心法】游戏设计心法系列1-以玩法为核心去设计游戏

游戏的本质 游戏的魔法在于寻找隐藏事物之间的联系。 游戏的魅力在于随着玩家逐渐发现并了解游戏世界的方方面面&#xff0c;他会得到一种丰富而深厚的体验。 挑战&#xff0c;竞争和互动是游戏玩法的三大要素。 规则&#xff0c;过程&#xff0c;目标则是游戏内容的要素。 如…

学生成绩管理系统(c语言)

目录 题目需求 程序编写 定义学生结构体: 选择菜单: 文件读入结构体变量: 结构体变量写入文件: 输入检查: 输入记录: 打印记录: 修改记录: 删除记录: 查找信息: 最终代码: 调试: 软件准备: 测试数据: 直接复制测试数据版本: 输入,打印输出…

合并两个有序链表(C++)

题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1…

取Dataset子集(pytorch)

取Dataset子集--pytorch 1. why2. how3. example 1. why 我们在调试深度学习代码时&#xff0c;常常会遇到数据集太大&#xff0c;导致调试浪费时间的情况&#xff0c;这种情况下&#xff0c;将数据集中的一个子集拿出来用于调试代码&#xff0c;调试成功在用完整的数据集运行…

从InnoDB索引的数据结构,去理解索引

从InnoDB索引的数据结构&#xff0c;去理解索引 1、InnoDB 中的 BTree1.1、BTree 的组成1.2、BTree中的数据页 2、聚簇索引2.1、聚簇索引的特点2.2、聚簇索引的结构示例2.3、聚簇索引的优缺点 3、非聚簇索引3.1、非聚簇索引结构示例3.2、关于回表3.3、聚簇索引和非聚簇索引的区…

快速排序算法

快速排序一&#xff1a;给定一个数组&#xff0c;进行排序&#xff0c;要求排序完成之后&#xff0c;小于数组最后一个元素的数据全部在它的左边&#xff0c;大于它的全部在它的右边&#xff0c;左右两边内部不要求有序&#xff0c;比如原数组是[5, 6, 3, 1, 2, 3]排序完之后:[…

数据特征工程 | 基于PCA算法(Python)

随着数据量的不断增加和数据维度的不断扩展,如何进行高效的数据降维处理成为了一个热门话题。在数据分析领域,PCA算法作为一种常用的数据降维方法,可以对多个特征进行降维,提高计算效率和降低存储空间需求。本文以波士顿房价数据集为例,探讨如何利用PCA算法对房屋价格进行…

基本微信小程序的外卖点餐订餐平台

项目介绍 餐饮行业是一个传统的行业。根据当前发展现状&#xff0c;网络信息时代的全面普及&#xff0c;餐饮行业也在发生着变化&#xff0c;单就点餐这一方面&#xff0c;利用手机点单正在逐步进入人们的生活。传统的点餐方式&#xff0c;不仅会耗费大量的人力、时间&#xf…

css四种导入方式

1 行内样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <h1 style"color: blue">我是标题</h1> </body> </htm…

【java爬虫】爬虫获取某交易所公司半年报全量数据

上一篇文章介绍了使用selenium获取某交易所公司半年报的方法&#xff0c;页面中公开展示的数据一共有2222条&#xff0c;本文就将所有数据分享出来。 这是上一篇文章 【java爬虫】使用selenium获取某交易所公司半年报数据-CSDN博客 首先是建表sql语句 use finance_db;/* 半…

批量去除影视剧中的片头片尾

1. 下载ffmpeg并配置环境变量 ffmpeg下载地址 Windows下配置ffmpeg环境变量 2. 运行脚本 Git下载地址 Windows系统下如何运行.sh脚本文件 在Windows上面可以安装git&#xff0c;然后使用Git Bash运行此脚本。 视频目录一定要用英文双引号括起来。 ./cut.sh "视频目录&q…

用python实现操作mongodb的插入和查找操作

用python实现操作mongodb的插入和查找操作 import pymongoclient pymongo.MongoClient("mongo://localhost:27017") db client["app"] col db["C1"]# 插入一条数据 #user { # "name": "Sam", # "age":…

粤嵌实训医疗项目--day03(Vue + SpringBoot)

往期回顾 粤嵌实训医疗项目day02&#xff08;Vue SpringBoot&#xff09;-CSDN博客 粤嵌实训医疗项目--day01&#xff08;VueSpringBoot&#xff09;-CSDN博客 目录 一、SpringBoot AOP的使用 二、用户模块-注册功能&#xff08;文件上传&#xff09; 三、用户模块-注册实现…

【Unity】RenderFeature应用(简单场景扫描效果)

【Unity】RenderFeature应用&#xff08;简单场景扫描效果&#xff09; RenderFeature 是一个用于渲染图形的概念&#xff0c;通常在图形引擎或游戏引擎中使用。它是一个模块化的组件&#xff0c;负责处理特定的渲染功能&#xff0c;例如阴影、光照、粒子效果等。 点击地面生成…