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

相关推荐
南岸月明5 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang6 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason31 分钟前
在HTML中CSS三种使用方式
前端·css·html
hnlucky44 分钟前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
西瓜_号码1 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇1 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk2 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试