vue源码分析系列二：$mount()和new Watcher()的执行过程

淡淡的烟草味﹌ 2022-01-22 04:59 314阅读 0赞

续[vue源码分析系列一：new Vue的初始化过程][vue_new Vue]  
在`initMixin()`里面调用了`$mount()`

if (vm.$options.el) {
         vm.$mount(vm.$options.el);// 挂载dom元素
    }

## $mount()方法定义 ##

Vue 中我们是通过 `$mount` 实例方法去挂载 vm 的，`$mount` 方法在多个文件中都有定义，如 `src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js`。因为 `$mount` 这个方法的实现是和平台、构建方式都相关的。接下来我们重点分析带 compiler 版本的 $mount 实现，因为抛开 webpack 的 vue-loader，我们在纯前端浏览器环境分析 Vue 的工作原理，有助于我们对原理理解的深入。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]  
compiler 版本的 $mount 实现非常有意思，先来看一下 `src/platform/web/entry-runtime-with-compiler.js` 文件中定义：

Vue.prototype.$mount = function() {
        el = el && query(el); // 表示如果el存在就执行query(el)方法
        
        if (el === document.body || el === document.documentElement) {
            // Vue 不能挂载在 body、html 这样的根节点上，因为它会替换掉这些元素
            process.env.NODE_ENV !== 'production' && warn(
              "Do not mount Vue to <html> or <body> - mount to normal elements instead."
            );
            return this
        }
        
        // 如果有render方法，就直接 return 并调用原先原型原型上的 $mount 方法
        // 如果没有render方法，就判断有没有template
        // 如果没有template就会调用template = getOuterHTML(el)
        // 总之，最终还是会将template转换成render函数
        // 最后再调用 mountComponent 方法
        if (!this.$options.render) {
            if(this.$options.template){
                if (template.charAt(0) === '#') { // 我们这里的 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
                    );
                  }
                }
            }
        }
      
        // 然后开始编译
        if (template) {
            // 通过compileToFunction 生成 render 函数，渲染vnode的时候会用到
            var ref = compileToFunctions(); 
            var render = ref.render;
            var render = ref.render;
            var staticRenderFns = ref.staticRenderFns; // 静态 render函数
            options.render = render; // 会在渲染 Vnode 的时候用到
            options.staticRenderFns = staticRenderFns;
        }
        
        return mount.call(this, el, hydrating)
        // 最后，调用原先原型上的 $mount 方法挂载。
        // 并执行 mountComponent() 方法
        // mountComponent 在 core/instance/lifecycle 中   
    }

这段代码首先缓存了原型上的 `$mount` 方法，再重新定义该方法，我们先来分析这段代码。首先，它对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上。接下来的是很关键的逻辑 —— 如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法。这里我们要牢记，在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终都会转换成 render 方法，那么这个过程是 Vue 的一个“在线编译”的过程，它是调用 `compileToFunctions` 方法实现的，编译过程我们之后会介绍。最后，调用原先原型上的 `$mount` 方法挂载。

原先原型上的 `$mount` 方法在 `src/platform/web/runtime/index.js` 中定义，之所以这么设计完全是为了复用，因为它是可以被 `runtime only` 版本的 Vue 直接使用的。

// public mount method
    Vue.prototype.$mount = function ( // 这是最开始定义的$mount方法，在runtime-only版本中
      el,
      hydrating
    ) {
        //var inBrowser = typeof window !== 'undefined';
        el = el && inBrowser ? query(el) : undefined;
        return mountComponent(this, el, hydrating) // 然后执行 mountComponent方法
    };

`$mount` 方法支持传入 2 个参数，第一个是 el，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 `query` 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关，在浏览器环境下我们不需要传第二个参数。

## query(el)获取dom元素 ##

/**
     * Query an element selector if it's not an element already.
     */
    function query (el) {
      if (typeof el === 'string') {
        var selected = document.querySelector(el);
        if (!selected) { // 如果存在 el 元素，就直接返回 selected，否则如下
          process.env.NODE_ENV !== 'production' && warn(
            'Cannot find element: ' + el
          );
          return document.createElement('div') // 如果不存在el元素，就返回一个空div
        }
        return selected
      } else { // 否则直接返回dom元素
        return el
      }
    }

## mountComponent()方法 ##

从上面的代码可以看到，`mountComponent` 核心就是先实例化一个渲染`Watcher`，在它的回调函数中会调用 `updateComponent` 方法，在此方法中调用 `vm._render` 方法先生成虚拟 Node，最终调用 `vm._update` 更新 DOM。

`Watcher` 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数，这块儿我们会在之后的章节中介绍。

函数最后判断为根节点的时候设置 `vm._isMounted` 为 `true`， 表示这个实例已经挂载了，同时执行 `mounted` 钩子函数。 这里注意 `vm.$vnode` 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例。  
`mountComponent` 方法的逻辑也是非常清晰的，它会完成整个渲染工作

## updateComponent() ##

在这个方法里有两个方法需要调用：vm.\_render() and vm.\_update(),先调用 \_render 方法生成一个vnode，然后将这个vnode传入到 \_update()方法中

updateComponent = function () {
        // vm._render() 方法渲染出来一个 VNode
        // jydrating 跟服务端渲染相关，如果没有启用的话，其为 false
        // 当收集好了依赖之后，会通过 Watcher 的 this.getter(vm, vm) 来调用 updateComponent() 方法
        vm._update(vm._render(), hydrating); // 然后执行 vm._render()方法
    };

## new Watcher() ##

渲染watcher，Watcher 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数

new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);

## Watcher.prototype.get() ##

在Watcher的构造函数中定义了getter函数：`this.getter = expOrFn`。这个expOrFn 是updateComponent方法，在`Watcher.prototype.get()`方法中通过`this.getter.call(vm, vm)`来调用updateComponent方法，然后执行`vm._update(vm._render, hydrating)`。

Watcher.prototype.get = function get () {
      // 依赖收集
      pushTarget(this);
      var value;
      var vm = this.vm; // this => Watcher,里面有当前的Vue实例vm
      try {
        value = this.getter.call(vm, vm);
      } catch (e) {
        if (this.user) {
          handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
        } else {
          throw e
        }
      } finally {
        // "touch" every property so they are all tracked as
        // dependencies for deep watching
        if (this.deep) {
          traverse(value);
        }
        popTarget();
        this.cleanupDeps();
      }
      return value
    };

## 总结 ##

到这里，我们知道updateComponent方法会完成整个渲染工作，在系列三中，将深入分析 vm.\_render()方法以及vm.\_update()方法。

[vue_new Vue]: https://blog.csdn.net/a419419/article/details/90764860
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220122/4e0db531d0d84b0abeb4c517eb6a6602.png