vue原理分析（三）new()创建Vue实例

今天我们来分析Vue实例的创建

代码如下：

Vue.config.productionTip = false



new Vue({

  render: h => h(App),

}).$mount('#app')

Vue.config.productionTip = false

这个配置成false，是阻止启动生产消息

new Vue({

  render: h => h(App),

}).$mount('#app')

这串代码可以拆分成2句

第一句是创建一个Vue实例

const app = new Vue({ render: h => h(App) })

第二句是将Vue实例挂载在id为app的标签上，这个app标签是在index.html中，大家可以自己找一下

app.$mount('#app')

这里研究下Vue实例的创建

const app = new Vue({ render: h => h(App) })

先看下对象里面

render: h => h(App)

这个是一个缩写，

实际上是

render: function (createElement) {

    return createElement(App);

}

改为箭头函数

render: createElement => createElement(App)

用h指代createElement

render: h => h(App)

实际渲染是这样子的

import App from './App'

new Vue({

    el: '#root',

    template: '<App></App>',

    components: {

        App

    }

})

引入App组件，从而生成VNode节点

后续通过Vue.prototype.$mount进行挂载，从而可以渲染成真实的DOM结点