vue渲染过程

1. 把模板编译为render函数
2. 实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
3. 对比虚拟dom，渲染到真实dom
4. 组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3

第一步：模板变成render函数

App.vue

// App.vue 
<template>
    <div>
        hello word
    </div>
</template>

<script>

export default {
}

</script>

<style>

</style>

main.js

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

console.log(App)

new Vue({
  render: h => h(App)
}).$mount('#app')

我们引入组件的后，其实会有一个解析器(vue-loader)对此模板进行了解析，生成了render函数。当然，如果没有通过解析器解析为render函数，也没有关系，在组件第一次挂载的时候，Vue会自己进行解析。

二、挂载过程

new Vue({
  render: h => h(App)
}).$mount('#app')

App对象，内置有一个调用 rende的方法：render()，当挂载的过程中，调用render()，每个template此时为render(){ return VNode }，生成虚拟节点(VNode)，众多虚拟节点组成了虚拟DOM

每个虚拟节点(VNode)中都有一个属性elm，指向一个真实dom节点 (真实DOM往后就是正常的渲染过程 不包含js)

三、更新过程

当内部的data发生改变时，生成最新的VNode，通过diff算法对比，将有差异的地方补到真实dom上