在我们利用脚手架搭建项目的时候，main.js

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

这是我一个项目中的，和实际可能有一点不一样，不过意思雷同。

new 一个Vue对象，然后挂载$mount方法，通过自定义Render方法、template、el等生成Render函数，

我这里使用的render,当数据发生变化时，Render函数执行生成VNode对象,通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素.

这是一整个new Vue的渲染过程。

我们看到render指向的是App，就是App.vue,然后页面通过路由，把页面都放到App.vue里面，于此，一个单页面应用诞生了。

渲染过程中，提供了三种渲染模式，自定义Render函数、template、el均可以渲染页面，也就是对应我们使用Vue时

自定义Render函数：

Vue.component('anchored-heading', {
    render: function (createElement) {  return createElement(  'h' + this.level, // name 标签名称  this.$slots.default // 子组件中的阵列  )  },  props: {  level: {  type: Number,  required: true  }  } })

template写法：

let vue = new Vue({
    data: {
        msg: 'test'
 },  template: '<div>{{msg}}</div>' })

 el写法：

let vue = new Vue({
    el: '#app',
    data: { message: 'Hello Vue!' } })

这三种渲染模式最终都是要得到Render函数, 只不过用户自定义的Render函数省去了程序分析的过程，等同于处理过的Render函数，而普通的template或者el只是字符串，需要解析成AST，再将AST转化为Render函数,无论哪种方法，都要得到Render函数。

如果是比较简单的逻辑，使用template和el比较好，因为这两种都属于声明式渲染，对用户理解比较容易，但灵活性比较差，因为最终生成的Render函数是由程序通过AST解析优化得到的。

而使用自定义Render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。

在Vue.js 2.0中javascript模拟DOM模型树就是VNode，Render函数执行后都会返回VNode对象.

VNode的数据结构中还有VNodeData、VNodeDirective、VNodeComponentOptions，这些数据结构都是对DOM节点的一些描述,

DOM模型树通过DOM Diff算法查找差异，将差异转为真正DOM节点,

Render函数执行生成了VNode，而VNode只是Virtual DOM，我们还需要通过DOM Diff之后，来生成真正的DOM节点,

当VNode为真实元素或旧的VNode和新的VNode完全相同时，直接调用createElm方法生成真实的DOM树，当VNode新旧存在差异时，则调用patchVnode方法，通过比较新旧VNode节点，根据不同的状态对DOM做合理的添加、删除、修改DOM，再调用createElm生成真实的DOM树.

这是一篇临时记录，未完待续···