在vue实例中，该实例由$mount()装载。让我们分析一下$mount()函数实现了哪些功能。

$mount函数执行位置

_init是在执行initMixin时绑定到Vue原型的私有方法。

$mount函数是如何将组件挂接到指定的元素

$mount函数定义了位置

$mount函数定义的位置有两个：

第一个是在src/platforms/web/runtime/index . js中。

这里的$mount是一种公共挂载方法。之所以会这样，是因为Vue的构建版本很多，有些版本会依靠这个方法来定制一些功能，后面会解释。

//公共挂载方法//el:可以是字符串或Dom元素。//补水是补丁算法参数vue . prototype . $ mount=function(El？弦|元素，补水？布尔值): Component {//判断el和宿主环境，然后通过工具函数查询重写el。el=el inBrowser？Query(el) : undefined //执行真正的挂载并返回返回的挂载组件(this，el，补水)} src/platforms/web/runtime/index . js文件是运行时版本Vue的入口文件，所以这个方法是由运行时版本Vue执行的$mount。

关于Vue的不同构建版本，我们可以看到Vue对不同构建版本的解释。

您还可以了解：这个作者封装的工具函数查询

/** *如果元素选择器还不是元素，请查询它。*/导出函数查询(El : string | Element): Element { if(type of El==' string '){ const selected=document . queryselector(El)if(！选中){//开发环境中给出错误提示process.env.NODE_ENV！==' production' warn('找不到element : ' El)//return document . createelement(' div ')}的容错处理returnselected} else {returnel}}定义$mount函数的第二个地方是src/platforms/web/entry-Runtime-with-Compiler . js文件，它是完整Vue (Runtime Compiler)的入口文件。

运行时和编译器不清楚的童鞋可以在官网runtime编译器vs. Only包含运行时。

//缓存运行时候定义的公共$mount方法const mount=vue。原型。vue山。原型。$ mount=function(El？弦|元素，补水？布尔值):组件{ //通过询问方法重写el(挂载点： 组件挂载的占位符)el=el查询(el) /*伊斯坦布尔忽略if *///提示不能把正文/html作为挂载点，开发环境下给出错误提示//因为挂载点是会被组件模板自身替换点，显然正文/html不能被替换if(El===文档。正文| | El===文档。文档元素){流程。ENV。node _ ENV！=='production' warn('不要将某视频剪辑软件挂载到超文本标记语言或车身安装到普通元素.` )返回此}//$选项是在新Vue(选项)时候_init方法内执行。//$选项可以访问到选择的所有属性如数据、过滤器、组件、指令等常量选项=这个.$options //解析模板/el并转换为渲染函数/如果包含提出函数则执行跳出，直接执行运行时版本的$mount方法if(！options.render) { //没有提出函数时候优先考虑模板属性让模板=选项。模板if(模板){//模板存在且模板的类型是字符串if(模板的类型===' string '){ if(模板。charat(0)===' # '){//模板是ID模板=idToTemplate(模板)/*伊斯坦布尔忽略if */if (process.env.NODE_ENV！=='生产！模板){ warn(` 0找不到模板元素或为empty: ${options.template} `，this)} } else if(template。nodetype){//模板的类型是元素节点，则使用该元素的innerHTML作为模板模板=模板。innerhtml } else {//若模板既不是字符串又不是元素节点，那么在开发环境会提示开发者传递的模板选项无效if (process.env.NODE_ENV！==“production”){ warn(”无效的模板选项： '模板，这个)}返回this } } else if (el) { //如果模板选项不存在，那么使用埃尔元素的外部超文本标记语言作为模板内容template=getouthtml(El)}//template :存储着最终用来生成渲染函数的字符串如果(模板){ /*伊斯坦布尔忽略if */if (process.env.NODE_ENV！==“生产”配置。性能标记){标记('编译')}//获取转换后的提出函数与staticRenderFns，并挂在$options上const { render，static render fns }=CompileToFunctions(模板，{ outputsourcerange : process。ENV。node _ ENV！=='production '，shouldDecodeNewlines，shouldDecodeNewlinesForHref，delimiters:选项。分隔符，comments: options.comments }，this)选项。渲染=渲染选项。静态renderfns=静态renderfns/*伊斯坦布尔忽略if *//用来统计编译器性能，配置是全局配置对象if (process.env.NODE_ENV！==“生产”配置。性能标记){标记('编译结束')度量(` vue $ { this ._name}编译`、'编译'、'编译结束')} } } //调用之前说的公共增加方法//重写$mount方法是为了添加模板编译的功能返回mount.call(这个，el，补水)}关于idToTemplate方法： 通过询问获取该身份获取数字正射影像图并把该元素的innerHTML作为模板

const idToTemplate=cache(id={ const El=query(id)return El。innerhtml })getouthtml方法：

/** *获取元素的外部HTML，同时注意工业管理学(Industrial Engineering)中的挽救（saving的简写）元素。*/函数元素：字符串{ if(El。OhHTMl){返回El。outh html } else {//修复IE9-11中挽救(保存的简写)标签元素是没有innerHTML和外部超文本标记语言这两个属性const容器=文档。createelement(' div ')容器。appendchild(El。clonenode(true))返回容器。innerhtml } }关于compileToFunctions函数，在src/平台/web/entry-runtime-with-编译器。射流研究…中可以看到会挂载到某视频剪辑软件上作为一个全局方法。

安装组件方法： 真正执行绑定组件

安装组件函数中是出现在src/core/instance/lifetime . js。

导出函数挂载组件(vm:组件，//组件实例vm el:元素，//挂载点补水？布尔值):组件{ //在组件实例对象上添加$el属性//$el的值是组件模板根元素的引用虚拟机$el=el if(！虚拟机$options.render) { //渲染函数不存在，这时将会创建一个空的虚拟节点对象虚拟机$期权。render=createEmptyVNode if(进程。ENV。NODE _ ENV！=='production') { /*伊斯坦布尔忽略if */if ((vm .$选项。模板虚拟机$options.template.charAt(0)！=='#') || vm .$options.el || el) { warn('您正在使用模板' '编译器不可用的某视频剪辑软件的仅运行时版本。要么将模板预编译为"呈现函数",要么使用编译器包含的内部版本.vm ) } else { warn('未能装载组件：模板或未定义呈现函数'，vm ) } } } //触发即将挂载生命周期钩子callHook(vm，‘BeforeMount’)//VM .渲染(_ r)函数的作用是调用虚拟机$options.render函数并返回生成的虚拟节点(vnode)。模板=render=vnode //vm ._更新函数的作用是把虚拟机。渲染(_ r)函数生成的虚拟节点渲染成真正的多姆。vnode=真实dom节点让updateComponent //把渲染函数生成的虚拟数字正射影像图渲染成真正的DOM /*伊斯坦布尔忽略if */if (process.env.NODE_ENV！==“生产”配置。性能标记){ updateComponent=()={ const name=VM ._name const id=vm ._ uid const 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，补水)mark(end tag)measure(` vue $ { name } patch `，startTag，end tag)} } else { updateComponent=()={ VM ._更新(虚拟机._render()，补水)} } //我们将此设置为vm .由于观察器的初始补丁可能调用依赖于伏特计的$forceUpdate(例如，在子//组件的挂载钩子内部),因此观察器的构造函数//内部有_观察者._已经定义了观察器/创建一个提出函数的观察者，关于看守人后续再讲述。新的观察器(虚拟机，更新组件，noop，{ before () { if(虚拟机._isMounted！虚拟机_ _ IsDesteroyed){ callHook(VM，' beforeUpdate') } } }，true /* isRenderWatcher */)水合=false //手动挂载实例，在self /挂载上挂载的调用是为其插入的挂钩if (vm)中的渲染创建的子组件调用的$vnode==null) { vm ._isMounted=true callHook(虚拟机，“已装载”)}返回vm}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。