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

相关推荐
尘世中一位迷途小书童2 分钟前
代码质量保障:ESLint + Prettier + Stylelint 三剑客完美配置
前端·架构
Mintopia2 分钟前
🧭 Next.js 架构与运维:当现代前端拥有了“分布式的灵魂”
前端·javascript·全栈
尘世中一位迷途小书童12 分钟前
从零搭建:pnpm + Turborepo 项目架构实战(含完整代码)
前端·架构
JarvanMo22 分钟前
Flutter 中的 ClipRRect | 每日 Flutter 组件
前端
某柚啊22 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c23 分钟前
如何学习Lodash源码?
前端·javascript·学习
JamSlade30 分钟前
react 无限画布难点和实现
前端·react.js
im_AMBER36 分钟前
React 02
前端·笔记·学习·react.js·前端框架
浩男孩36 分钟前
🍀我实现了个摸鱼聊天室🚀
前端
玲小珑37 分钟前
LangChain.js 完全开发手册(十六)实战综合项目二:AI 驱动的代码助手
前端·langchain·ai编程