第三章：vm._render()

export function renderMixin (Vue: Class<Component>) {

  // ... 省略代码 ...

  // 定义私有的render方法，返回 VNode 对象
  Vue.prototype._render = function (): VNode {
    // 缓存当前实例
    const vm: Component = this
    // 获取options中的render函数
    // 这个render可以是自己写的也可以是通过编译生成的
    const { render, _parentVnode } = vm.$options

    // ... 省略代码 ...
 
    try {
      currentRenderingInstance = vm
      // 调用render函数
      // 第一个参数是上下文（在生产环境下就是this，开发环境是Proxy对象）
      // 第二个参数是Vue的createElement方法
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      // ... 省略代码 ...
    } finally {
      // ... 省略代码 ...
    }
 
    // 如果返回的vnode不是VNode对象的话，就创建一个空的vnode，防止报错
    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()
    }
    // 设置父节点
    vnode.parent = _parentVnode
    return vnode
  }
}

Vue.prototype._init = function (options?: Object) {

    // ... 省略代码 ...
 
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
 
    // ... 省略代码 ...
 
  }

export function initRender (vm: Component) {

  // ... 省略代码 ...
  
  // 被编译生成的render函数所使用的的方法
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // 手写render函数的方法
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  
  // ... 省略代码 ...
  
}

let initProxy

// 开发环境才需要处理 Proxy，虽然在init中已经判断过一次了
// 但是在别的地方也会单独使用这个模块，所以在这里再做一次判断
if (process.env.NODE_ENV !== 'production') {
  // 定义报错信息
  const allowedGlobals = makeMap(
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' // for Webpack/Browserify
  )

  const warnNonPresent = (target, key) => {
    warn(
      `Property or method "${key}" is not defined on the instance but ` +
      'referenced during render. Make sure that this property is reactive, ' +
      'either in the data option, or for class-based components, by ' +
      'initializing the property. ' +
      'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
      target
    )
  }

  const warnReservedPrefix = (target, key) => {
    warn(
      `Property "${key}" must be accessed with "$data.${key}" because ` +
      'properties starting with "$" or "_" are not proxied in the Vue instance to ' +
      'prevent conflicts with Vue internals' +
      'See: https://vuejs.org/v2/api/#data',
      target
    )
  }

  // 判断浏览器支不支持 Proxy
  const hasProxy =
    typeof Proxy !== 'undefined' && isNative(Proxy)

  // ... 省略代码 ...

  const hasHandler = {
    has (target, key) {
      const has = key in target
      const isAllowed = allowedGlobals(key) ||
        (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data))

      // 如果元素不在target下，也不是在允许的全局属性下，就报警告
      // 在data或者methods中未定义却在template中调用了 就会报错
      if (!has && !isAllowed) {
        if (key in target.$data) warnReservedPrefix(target, key)
        else warnNonPresent(target, key)
      }
      return has || !isAllowed
    }
  }

  // ... 省略代码 ...

  initProxy = function initProxy (vm) {
    // 先判断浏览器支不支持 Proxy（ES6提供的API，对对象访问做一个劫持）
    if (hasProxy) {
      // 确定使用哪个代理处理程序
      const options = vm.$options
   // 本文的案例中，这里的handlers就是hasHandler
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      // target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
      vm._renderProxy = vm
    }
  }
}

export { initProxy }