Vue vm.$options 中的render

new Vue({
  el:'#app',
  render: h => h(App),
})

vm.$options指的是：

{
  el:'#app',
  render: h => h(App),
}

在Vue.prototype._render 代码中我们可以看到：
var render = vm.$options.render;

实际上这个render指的就是上面实例化时的render函数

 var vm = this;
 var ref = vm.$options;
 var render = ref.render;

Vue.prototype._render = function () {

    var vm = this;
    var ref = vm.$options;
    var render = ref.render;

    var _parentVnode = ref._parentVnode;

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      );
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode;
    // render self
    var vnode;
    try {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm;
      vnode = render.call(vm._renderProxy, vm.$createElement);
      console.log('render ---- 999')
      console.log(vnode)
    } 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' && 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;
      }
    } finally {
      currentRenderingInstance = null;
    }
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0];
    }
    // 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
  };

了解下面的vnode的实现：

 try {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm;
      vnode = render.call(vm._renderProxy, vm.$createElement);
    }

现在数据流结构是：

step1:入口文件是main.js

/*------------main.js------------*/
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  render: h => h(App),
})

step2:组件App.vue

/*------------App.vue------------*/
<template>
  <div id="app1">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

step3:组件App.vue中的组件HelloWorld

/*------------HelloWorld.vue------------*/
<template>
  <div id="hello" class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
}
</script>

文件关数据流

image.png

然后在_render函数中我们可以看到vnode生成的数据对象是：

1. main.js

-context: Vue {_uid: 0
-parent: null

VNode {
asyncFactory: undefined
asyncMeta: undefined
children: undefined
componentInstance: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
componentOptions: {propsData: undefined, listeners: undefined, tag: undefined, children: undefined, Ctor: ƒ}
context: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
data: {on: undefined, hook: {…}, pendingInsert: null}
elm: div#app1
fnContext: undefined
fnOptions: undefined
fnScopeId: undefined
isAsyncPlaceholder: false
isCloned: false
isComment: false
isOnce: false
isRootInsert: true
isStatic: false
key: undefined
ns: undefined
parent: null
raw: false
tag: "vue-component-1-App"
text: undefined
child: (...)
__proto__: Object
}

2. App.vue

-context: Vue {_uid: 1
-parent: VNode {tag: "vue-component-1-App", data: {…}, children: undefined, text: undefined, elm: div#app1, …}

VNode {
asyncFactory: undefined
asyncMeta: undefined
children: (2) [VNode, VNode]
componentInstance: undefined
componentOptions: undefined
context: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
data: {attrs: {…}}
elm: div#app1
fnContext: undefined
fnOptions: undefined
fnScopeId: undefined
isAsyncPlaceholder: false
isCloned: false
isComment: false
isOnce: false
isRootInsert: true
isStatic: false
key: undefined
ns: undefined
parent: VNode {tag: "vue-component-1-App", data: {…}, children: undefined, text: undefined, elm: div#app1, …}
raw: false
tag: "div"
text: undefined
child: (...)
__proto__: Object
}

3. HelloWorld.vue

-context: Vue {_uid: 2
-parent: VNode {tag: "vue-component-2-HelloWorld", data: {…}, children: undefined, text: undefined, elm: div#hello.hello, …}

VNode {
asyncFactory: undefined
asyncMeta: undefined
children: (8) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode]
componentInstance: undefined
componentOptions: undefined
context: VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
data: {staticClass: "hello", attrs: {…}}
elm: div#hello.hello
fnContext: undefined
fnOptions: undefined
fnScopeId: undefined
isAsyncPlaceholder: false
isCloned: false
isComment: false
isOnce: false
isRootInsert: true
isStatic: false
key: undefined
ns: undefined
parent: VNode {tag: "vue-component-2-HelloWorld", data: {…}, children: undefined, text: undefined, elm: div#hello.hello, …}
raw: false
tag: "div"
text: undefined
child: (...)
__proto__: Object
}

从上面的打印结果可以了解到render生成vnode的对象，及对应的父子关系