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

相关推荐
像是套了虚弱散1 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan1 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追3 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30734 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构