vue $mount挂载实例方法

Posted ttblog5

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue $mount挂载实例方法相关的知识，希望对你有一定的参考价值。

源码如下：
  var mount = Vue.prototype.$mount;
  Vue.prototype.$mount = function (  
    el,
    hydrating
  ) {
    el = el && query(el); //query是看el是字符串还是组件，如果是字符串就去document.querySelector(el)，如果查找到就返回return document.createElement(‘div‘)，这也是为什么挂载的dom变成div的原因
/* istanbul ignore if */
    if (el === document.body || el === document.documentElement) { //不能挂载在body,html
      warn(
        "Do not mount Vue to <html> or <body> - mount to normal elements instead."
      );
      return this
    }

    var options = this.$options;
    // resolve template/el and convert to render function
    if (!options.render) {  //判断是否有render,这也就是我们创建vue项目的时候会让选是Runtime Only 还是 Runtime+Compiler（现在默认选only），看源码推荐Compiler版本，因为抛开 webpack 的 vue-loader
　　var template = options.template;
      if (template) {  
        if (typeof template === ‘string‘) {
          if (template.charAt(0) === ‘#‘) {
            template = idToTemplate(template);  //这个定义如下const idToTemplate = cached(id => { const el = query(id) return el && el.innerHTML})，看字段是添加缓存还没研究
   　　       /* istanbul ignore if */
            if (!template) {
              warn(
                ("Template element not found or is empty: " + (options.template)),
                this
              );
            }
          }
        } else if (template.nodeType) {
          template = template.innerHTML;
        } else {
          {
            warn(‘invalid template option:‘ + template, this);
          }
          return this
        }
      } else if (el) {
        template = getOuterHTML(el);  //如果不是模板，就获取dom结构，这个返回会是string .例如‘<div class=‘app‘><div></div></div>‘
      }
      if (template) {
        /* istanbul ignore if */
        if (config.performance && mark) {
          mark(‘compile‘);  //埋点，不影响读源码，估计是对之后性能优化帮助
        }

        var ref = compileToFunctions(template, {
          outputSourceRange: "development" !== ‘production‘,
          shouldDecodeNewlines: shouldDecodeNewlines,
          shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments
        }, this);
        var render = ref.render; 
        var staticRenderFns = ref.staticRenderFns;
        options.render = render; //这步其实是最重要的拿到render，Compiler版本就是去进行一系列判断然后编译模板template，将它转换成render函数。所以上面的一系列的操作就是为了获取render函数。只是vue提供了很多种方法去编译。
然后去调用mountComponent方法
　　　　options.staticRenderFns = staticRenderFns; /* istanbul ignore if */

　　　　if (config.performance && mark) {
　　　　　　mark(‘compile end‘);
　　　　　　　　measure(("vue " + (this._name) + " compile"), ‘compile‘, ‘compile end‘);
　　　　　　}
　　　　　}
　　　　}
　　　　return mount.call(this, el, hydrating)  

　　　};







  Vue.prototype.$mount = function (
    el,
    hydrating
  ) {
    el = el && inBrowser ? query(el) : undefined;
    return mountComponent(this, el, hydrating) //这里会调用到mountComponent方法
  }; 









 function mountComponent (  //核心就是把render渲染成vnode，然后实例化一个渲染Watcher，在它的回调函数中会掉用updateComponent方法，最终调用vm._update更新DOM，会完成整个渲染工作 


  　el,
　　vm,
    hydrating
  ) {
    vm.$el = el;
    if (!vm.$options.render) {
      vm.$options.render = createEmptyVNode;
      {
        /* istanbul ignore if */
        if ((vm.$options.template && vm.$options.template.charAt(0) !== ‘#‘) ||
          vm.$options.el || el) {
          warn(  //就是用runtime-only版本，已经写render了，还写template会报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
          );
        }
      }
    }
    callHook(vm, ‘beforeMount‘);

    var updateComponent;
    /* istanbul ignore if */
    if (config.performance && mark) {
      updateComponent = function () {
        var name = vm._name;
        var id = vm._uid;
        var startTag = "vue-perf-start:" + id;
        var endTag = "vue-perf-end:" + id;

        mark(startTag);
        var 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 = function () {
        vm._update(vm._render(), hydrating);
      };
    }

    // we set this to vm._watcher inside the watcher‘s constructor
    // since the watcher‘s initial patch may call $forceUpdate (e.g. inside child
    // component‘s mounted hook), which relies on vm._watcher being already defined
　　Watcher 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数,都会调用updateComponent方法
   new Watcher(vm, updateComponent, noop, {
      before: function before () {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, ‘beforeUpdate‘);
        }
      }
    }, true /* isRenderWatcher */);
    hydrating = false;

    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
　　函数最后判断为根节点的时候设置 vm._isMounted 为 true， 表示这个实例已经挂载了，同时执行 mounted 钩子函数。 这里注意 vm.$vnode 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例
   if (vm.$vnode == null) {
      vm._isMounted = true;
      callHook(vm, ‘mounted‘);
    }
    return vm
  }




 
以上是关于vue $mount挂载实例方法的主要内容，如果未能解决你的问题，请参考以下文章
 

 vue $mount挂载实例方法


 vue之$mount


 Vue源码分析 : Vue实例挂载


 vue入门：（底层渲染实现render函数实例生命周期）


 Vue2.0 第四季第2节 实例方法


 [Vue]实例化Vue时的两种挂载方式el与$mount