这里先分析开发中手写render函数是如何转成Virtual Dom(虚拟Node)。
    Vue的_render方法是实例的私有方法,它用来把实例渲染成虚拟Node。它的定义在src/core/instance/render.js 文件中:

    1. Vue.prototype._render = function (): VNode {
    2. const vm: Component = this
    3. const { render, _parentVnode } = vm.$options
    4. // reset _rendered flag on slots for duplicate slot check
    5. if (process.env.NODE_ENV !== 'production') {
    6. for (const key in vm.$slots) {
    7. // $flow-disable-line
    8. vm.$slots[key]._rendered = false
    9. }
    10. }
    11. if (_parentVnode) {
    12. vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    13. }
    14. // set parent vnode. this allows render functions to have access
    15. // to the data on the placeholder node.
    16. vm.$vnode = _parentVnode
    17. // render self
    18. let vnode
    19. try {
    20. vnode = render.call(vm._renderProxy, vm.$createElement)
    21. } catch (e) {
    22. handleError(e, vm, `render`)
    23. // return error render result,
    24. // or previous vnode to prevent render error causing blank component
    25. /* istanbul ignore else */
    26. if (process.env.NODE_ENV !== 'production') {
    27. if (vm.$options.renderError) {
    28. try {
    29. vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
    30. } catch (e) {
    31. handleError(e, vm, `renderError`)
    32. vnode = vm._vnode
    33. }
    34. } else {
    35. vnode = vm._vnode
    36. }
    37. } else {
    38. vnode = vm._vnode
    39. }
    40. }
    41. // return empty vnode in case the render function errored out
    42. if (!(vnode instanceof VNode)) {
    43. if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
    44. warn(
    45. 'Multiple root nodes returned from render function. Render function ' +
    46. 'should return a single root node.',
    47. vm
    48. )
    49. }
    50. vnode = createEmptyVNode()
    51. }
    52. // set parent
    53. vnode.parent = _parentVnode
    54. return vnode
    55. }