vue 将组件渲染成html_Vue 源码之组件渲染

上篇讲了 new Vue 发生了哪些事情的大致流程，即如图所示，今天来分析下组件是如何渲染的基本流程。

import Vue from 'vue'
import App from './App.vue'

var app = new Vue({
  el: '#app',
  // 这里的 h 是 createElement 方法
  render: h => h(App)
})

new Vue 发生了什么？

首先会执行 vm 实例初始化过程，然后进入到 $mount，因为手写了 render 函数，所以跳过 compile 过程，否则会将 template 编译成 render 函数，接着直接执行 render 函数，实际上就是执行 createElement 方法，在这个方法中会对传入的第一个参数（tag），进行各种判断，我们这里传入的是一个组件对象，所以会进入到 createComponent 方法中，这个方法会生成一个组件 vnode，接着这个组件 vnode 会作为参数给到 patch 方法，其中核心的方法是 createElm 方法，这个方法会对不同的 vnode 有不同的处理方式，目的就是让 vnode 转变成 真实的 DOM；

当是组件 vnode 时，会进入到 createComponent 方法中（这是在 patch.js 中定义的方法，和之前同名的方法不是一个方法），这个方法的用途是返回组件实例，在这个过程中它会进行组件初始化过程，整个流程跟 vm 实例初始化会走同一个 init 函数，以上图中的流程又会从头走一遍，只是在 render 函数执行后生成的叫渲染 vnode，即 APP.vue 中的 template 的根节点的 vnode，又将渲染 vnode 带入到 patch 函数中，进入到 createElm 函数中，如果这个渲染 vnode 有子节点就会进入到 createChildren 方法中，这个方法实际上就是递归 createElm 方法，先生成子节点的真实 DOM，然后将其插入到页面中，然后再生成其父节点的真实 DOM，如此反复直到 vm 实例初始化完毕，所有节点都渲染完成。