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

嗓子疼谁心疼2024-09-05 16:15

代码如下：

复制代码

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')

复制代码

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结点