1.Vue创建过程

使用 @vue/cli 创建的 vue2 项目的入口文件中的代码如下：

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

Vue.config.productionTip = false

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

这是Vue2创建实例的代码，Vue2是通过 new Vue()，构造函数的方式来创建实例。

App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换。

其中 router路由配置和 store Vuex的配置就不提，是额外的内容，着重看一下 render: h => h(App)。

简单的理解： render的作用就是来渲染虚拟DOM的。

render是一个配置项，它的作用是指定渲染函数，这里采用是的箭头函数的简写格式，完整的写法简化过程如下：

render: function (createElement) {
    return createElement(App)
}

render (createElement) {
    return createElement(App);
}

render (h){
    return h(App);
}

render: h => h(App);

$mount的作用是把前面产生的 vue 实例挂载到 <div id="app"> 的元素中。

就是说 render 函数的作用就是生成一个 VNode节点（虚拟节点），render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

挂载实例的写法有两种：

new Vue({}).$mount('#app') <====> new Vue({el: '#app}