Vue源码分析系列三：render

Hello_AlexCc
1,456 阅读2分钟

回顾

在上一系列中，我么已经了解到$mount是如何工作的，最后通过调用 updateComponent方法来执行vm._update(vm._render(), hydrating);,接下来我们来分析一下 vm._render()方法是如何运行的。

手写 render 方法

首先来看一下使用template的形式，

new Vue({
  el: '#app',
  template: '<h1>hello world</h1>'
})
// 或者这种方式
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

那么，我们如何手写 render 函数呢？仔细观察下面这段代码，试想一下这里的 createElement 参数是什么 。

new Vue({
    el: '#app',
    render(createElement) {
        return createElement('div', {
            attrs: {
                id: 'app1' //注意这里的id 是 app1
            }
        }, this.value)
    },
    data() {
        return {
            value: 'render function'
        }
    }
})

来看页面效果:

请注意上面红框框的 id, 是我们刚刚定义的 'app1'。所以我们为什么不能将元素绑定在body/html这些元素上就知道了吧，因为它会替换掉页面上的元素。

好了，进入正题，开始分析源码。

_render

Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在 src/core/instance/render.js 文件中：

注意，在分析源码的时候一定要走主线，不能一次性将某一个方法全看完或看透彻，因为它可能依赖了很多其它变量或者方法，如果都去分析，可能到后面看着看着就什么都看不懂了。在这里我们只分析 render 方法，像下面的 _parentVnode、$slots、$vnode 等等在后面的系列章节中再分析。

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，function (): VNode表示这个方法的返回值是一个 vnode。

在这段代码中，主要研究这一段代码 render.call(vm._renderProxy, vm.$createElement)

Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    // 下面这两个 if 先不用看
    // reset _rendered flag on slots for duplicate slot check
    if (process.env.NODE_ENV !== 'production') {
      for (const key in vm.$slots) {
        // $flow-disable-line
        vm.$slots[key]._rendered = false
      }
    }

    if (_parentVnode) {
      vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {
      // 分析主线
      // 从这里我们可以看出，手写render方法中的createElement参数就是 vm.$createElement方法
      vnode = render.call(vm._renderProxy, vm.$createElement)
      
      // 这个render 是 vm.$options.render
      // vm._renderProxy 如果在生产环境下，其实就是 vm 
      // 如果在开发环境下，就是 Proxy 对象(ES6中的API，不了解的话可以去看看)
      // vm.$createElement 定义在 initRender 函数中，初始化的时候定义的
      // 手写 render 函数创建 vnode 的方法
      // vm.$createElement = function (a, b, c, d) { 
      //    return createElement(vm, a, b, c, d, true);
      // };
      
      // 如果是编译生成的render函数，创建vnode的方法则是下面这个方法
      // vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };
      
    } catch (e) {
      handleError(e, vm, `render`)
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production') {
        if (vm.$options.renderError) {
          try {
            vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
          } catch (e) {
            handleError(e, vm, `renderError`)
            vnode = vm._vnode
          }
        } else {
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }
}

_renderProxy 是什么 ?

这个方法在初始化的时候就定义好了，在 initMixin中的 Vue.prototype._init() 方法中，我们来看一下是如何定义的:

if (process.env.NODE_ENV !== 'production') {
  // 如果是开发环境，就调用 initProxy 方法
  initProxy(vm);
} else {
  // 否则就是 vm 实例
  vm._renderProxy = vm;
}

Proxy对象

描述: Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

initProxy 方法

路径: src/core/instance/proxy.js

// proxy.js中还有一些其它方法，这里我们只看 initProxy方法
let initProxy
if (process.env.NODE_ENV !== 'production') {

  // 判断我们的浏览器支不支持proxy方法
  const hasProxy =
    typeof Proxy !== 'undefined' && isNative(Proxy)

    if (hasProxy) {
        const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact')
        config.keyCodes = new Proxy(config.keyCodes, {
          set (target, key, value) {
            if (isBuiltInModifier(key)) {
              warn(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`)
              return false
            } else {
              target[key] = value
              return true
            }
          }
        })
    }
    var hasHandler = {
        has: function has (target, key) {
          var has = key in target;
          var isAllowed = allowedGlobals(key) || key.charAt(0) === '_';
          if (!has && !isAllowed) {
            // 这个警告就是当你使用了没有定义的变量或者方法时调用的方法
            // 方法就不列出来了。
            warnNonPresent(target, key);
          }
          return has || !isAllowed
        }
    };

    initProxy = function initProxy (vm) {
        if (hasProxy) {
          // determine which proxy handler to use
          const options = vm.$options
          const handlers = options.render && options.render._withStripped
            ? getHandler
            : hasHandler
          // options.render上没有_withStripped，所以handlers 就是hasHandler
          vm._renderProxy = new Proxy(vm, handlers)
        } else {
          vm._renderProxy = vm
        }
    }
}
export { initProxy }

最后

当执行完了 _initProxy 之后，再回到 render 方法中看如下这段代码

if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        // render function 返回了多个 vnode 根节点
        // 应当返回单一 vnode 根节点
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        );
      }
      vnode = createEmptyVNode();
    }
    // set parent
    vnode.parent = _parentVnode;
    
    // 最后 return 这个 vnode
    return vnode

总结

vm._render 最终是通过执行 createElement 方法并返回的是 vnode，那这个 createElement 是如何创建 vnode 的呢 ? 在后面的两个系列中，我会先介绍 virtual DOM 的概念，然后再分析 createElement 的实现。

avatar
文章
阅读
粉丝