记录–手写vm.$mount方法

<div id="mount-point"></div> <!-- 创建构造器 --> var Profile = Vue.extend({  template:'<p>{{firstName}} {{lastName}} aka{{alias}}</p>',  data:function(){   return{    firstName:'Walter',    lastName:'White',    alias:'Heisenberg'   }  } }) <!-- 创建Profile实例，并挂载到一个元素上 --> new Profile().$mount('#mount-point');

 vm.$mount( [elementOrSelector] )

{ Element | string } [elementOrSelector]

（2）返回值

　　vm，即实例本身。

（3）用法

1、如果Vue.js实例在实例化时没有收到el选项，则它处于“未挂载”状态，没有关联的DOM元素。  2、可以使用vm.$mount手动挂载一个未挂载的实例。  3、如果没有提供elementOrSelector参数，模板将被渲染为文档之外的元素，并且必须使用原生DOM的API把它插入文档中。  4、这个方法返回实例自身，因而可以链式调用其他实例方法。

（4）例子

var MyComponent = Vue.extend({  template:'<div>Hello!</div>', }) <!-- 创建并挂载到#app（会替换#app） --> new MyComponent().$mount('#app'); <!-- 创建并挂载到#app（会替换#app） --> new MyComponent().$mount({el:'#app'}); <!-- 创建并挂载到#app（会替换#app） --> var component = new MyComponent().$mount(); document.getElementById('app').appendChild(component.$el);

1、在不同的构建版本中，vm.$mount的表现都不一样。其差异主要体现在完整版（vue.js）和只包含运行时版本（vue.runtime.js）之间。

2、完整版和只包含运行时版本之间的差异在于是否有编译器，而是否有编译器的差异主要在于vm.$mount方法的表现形式。

3、在只包含运行时的构建版本中，vm.mount的作用会稍有不同，它首先会检查template或el选项所提供的模板是否已经转换成渲染函数（render函数）。如果没有，则立即进入编译过程，将模板编译成渲染函数，完成之后再进入挂载与渲染的流程中。

4、只包含运行时版本的vm.$mount没有编译步骤，它会默认实例上已经存在渲染函数，如果不存在，则会设置一个。并且，这个渲染函数在执行时会返回一个空节点的VNode，以保证执行时不会因为函数不存在而报错。同时如果是开发环境下运行，Vue.js会触发警告，提示我们当前使用的是只包含运行时的版本，会让我们提供渲染函数，或者去使用完整的构建版本。

5、从原理的角度来讲，完整版和只包含运行时版本之间是包含关系，完整版包含只包含运行时版本。

三、完整版vm.$mount的实现原理

（1）实现代码

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){  <!-- 做些什么 -->  return mount.call(this,el); }

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){     el = el && query(el);     return mount.call(this,el); }

使用query获取DOM元素

function query(el){     if(typeof el === 'string'){         const selected = document.querySelector(el);         if(!selected){             return document.createElement('div');         }         return selected;     }else{         return el;     } }

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){  el = el && query(el);  const options = this.$options;  if(!options.render){   <!-- 将模板编译成渲染函数并赋值给options.render -->  }     return mount.call(this,el); }

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){  el = el && query(el);  const options = this.$options;  if(!options.render){   <!-- 新增获取模板相关逻辑 -->   let template = options.template;   if(template){     }else if(el){    template = getOuterHTML(el);   }  }     return mount.call(this,el); }

function getOuterHTML(el){  if(el.outerHTML){   return el.outerHTML;  }else{   const container = document.createElement('div');   container.appendChild(el.cloneNode(true));   return container.innerHTML;  } }

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){  el = el && query(el);  const options = this.$options;  if(!options.render){   <!-- 新增获取模板相关逻辑 -->   let template = options.template;   if(template){    if(typeof tempalte === 'string'){     if(tempalte.charAt(0) === "#"){      template = idToTemplate(tempalte);     }    }else if(tempalte.nodeType){     template = template.innerHTML;    }else{     if(process.env.NODE_ENV !== 'production'){      warn('invalid template option:'+tempalte,this);     }     return this;    }   }else if(el){    template = getOuterHTML(el);   }  }     return mount.call(this,el); }

function idToTemplate(id){  const el = query(id);  return el && el.innerHTML; }

const mount = Vue.prototype.$mount; Vue.prototype.$mount = function(el){  el = el && query(el);  const options = this.$options;  if(!options.render){   <!-- 新增获取模板相关逻辑 -->   let template = options.template;   if(template){    if(typeof tempalte === 'string'){     if(tempalte.charAt(0) === "#"){      template = idToTemplate(tempalte);     }    }else if(tempalte.nodeType){     template = template.innerHTML;    }else{     if(process.env.NODE_ENV !== 'production'){      warn('invalid template option:'+tempalte,this);     }     return this;    }   }else if(el){    template = getOuterHTML(el);   }   <!-- 新增编译相关逻辑 -->   if(tempalte){    const { render } = compileToFunctions(     template,     {...},     this    )    options.render = render;   }  }     return mount.call(this,el); }

function compileToFunctions(template,options,vm){  options = extend({},options);  <!-- 检查缓存 -->  const key = options.delimiters  ? String(options.delimiters)+tempalte  :template;  if(cache[key]){   return cache[key];  }  <!-- 编译 -->  const compiled = compile(template,options);  <!-- 将代码字符串转换为函数 -->  const res = {};  res.render = createFunction(compiled.render);  return (cache[key] = res) } function createFunction(code){  return new Function(code); }

1）首先，将options属性混合到空对象中，其目的是让options称为可选参数。

2）检查缓存中是否已经存在编译后的模板。如果模板已经被编译，就会直接返回缓存中的结果，不会重复编译，保证不做无用功来提升性能。

3）调用compile函数来编译模板，将模板编译成代码字符串并存储在compiled中的render属性中。

4）调用createFunction函数将代码字符串转换成函数。其实现原理箱单简单，使用new Function(code)就可以完成。

5）在代码字符串被new Function(code)转换成函数之后，当调用函数时，代码字符串会被执行。例如

const code = 'console.log("Hello Berwin")'; const render = new Function(code); render();//Hello Berwin

6）最后，将渲染函数返回给调用方。

16、当通过compileToFunctions函数得到渲染函数之后，将渲染函数设置到this.$options上。

四、只包含运行时版本的vm.$mount的实现原理

（1）只包含运行时版本的vm.mount方法的核心功能。实现如下

Vue.prototype.$mount = function(el){  el = el && inBrower ? query(el) : undefined;  return mountComponent(this,el); }

export function mountComponent(vm,el){  if(!vm.$options.render){   vm.$options.render = createEmptyVNode;   if(process.env.NODE_ENV !== 'production'){    <!-- 在开发环境发出警告 -->   }  } }

4、mountComponent方法会判断实例上是否存在渲染函数。如果不存在，则设置一个默认的渲染函数createEmptyVNode，该渲染函数执行后，会返回一个注释类型的VNode节点。

5、事实上，如果在mountComponent方法中发现实例上没有渲染函数，则会将el参数指定页面中的元素节点替换成一个注释节点，并且在开发环境下在浏览器的控制台中给出警告。

（2）Vue.js实例在不同的阶段会触发不同的生命周期钩子，在挂载实例之前会触发beforeMount钩子函数。

export function mountComponent(vm,el){  if(!vm.$options.render){   vm.$options.render = createEmptyVNode;   if(process.env.NODE_ENV !== 'production'){    <!-- 在开发环境发出警告 -->   }   callHook(vm,'beforeMount')  } }

export function mountComponent(vm,el){  if(!vm.$options.render){   vm.$options.render = createEmptyVNode;   if(process.env.NODE_ENV !== 'production'){    <!-- 在开发环境发出警告 -->   }   <!-- 触发生命周期钩子 -->   callHook(vm,'beforeMount');   <!-- 挂载 -->   vm._watcher = new Watcher(vm,()=>{    vm._update(vm._render())   },noop);   <!-- 触发生命周期钩子 -->   callHook(vm,'mounted');   return vm;  } }

1、vm._update作用：调用虚拟DOM中的patch方法来执行节点的比对与渲染操作。

2、vm._render作用：执行渲染函数，得到一份新的VNode节点树。

3、vm._update(vm._render())作用：先调用渲染函数得到一份最新的VNode节点树，然后通过vm._update方法对最新的VNode和上一次渲染用到的旧VNode进行对比并更新DOM节点。简单来说，就是执行了渲染操作。

（4）挂载是持续性的，而持续性的关键就在于new Watcher这行代码。

1、Watcher的第二个参数支持函数，并且当它是函数时，会同时观察函数中所读取的所有Vue.js实例上的响应式数据。

2、当watcher执行函数时，函数中所读取的数据都将会触发getter去全局找到watcher并将其收集到函数的依赖列表中。即，函数中读取的所有数据都将被watcher观察。这些数据中的任何一个发生变化时，watcher都将得到通知。

3、当数据发生变化时，watcher会一次又一次地执行函数进入渲染流程，如此反复，这个过程会持续到实例被销毁。

4、挂载完毕后，会触发mounted钩子函数。

如果不懂watcher，其实可以去掉看，就简单很多

export function mountComponent(vm,el){  if(!vm.$options.render){   vm.$options.render = createEmptyVNode;   if(process.env.NODE_ENV !== 'production'){    <!-- 在开发环境发出警告 -->   }   <!-- 触发生命周期钩子 -->   callHook(vm,'beforeMount');   <!-- 挂载 -->       vm._update(vm._render())      <!-- 触发生命周期钩子 -->   callHook(vm,'mounted');   return vm;  } }

这样，是不是很容易理解了。整个mountComponent，一句关键代码：vm._update(vm._render())，表示通过执行vm._render()得到VNode，再把VNode传入vm._update（） ，vm._update（）得功能是 将传入的VNode 变成 真实Dom渲染到页面。

简单地总结一下：

$mount()的思路就是， 判断 用户传入的option有没有render函数，

1.有的话就走运行时版本，

2.没有的话就自动生成render函数，然后在执行运行时版本（其实这就是编译时版本，比运行时版本多了异步生成render函数的步骤）。

执行运行时版本的时候，

1. 通过render()获得Vnode
2. 把Vnode传入_update() 实现渲染

本文转载于:

https://juejin.cn/post/6844904181438889991

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。