Vue3.0源码逐行解析(一)从创建一个实例开始_vue3创建自定义实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qianduan686/article/details/118106538

本文对比Vue2.x和Vue3.0创建应用实例的过程，探讨Vue3.0的createApp和mount方法。Vue3引入了createApp作为入口，通过ensureRenderer创建app对象，同时在mount方法上进行改进以支持跨平台渲染。文章深入分析了Vue3中创建VNode和渲染VNode的核心流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本，对于喜欢折腾源码的我来说不安分的心开始躁动了 , Vue2.x的源码像一个娓娓道来的家常故事易懂易学。Vue3.0的故事像个跌宕起伏的悬疑剧看着让人抓脑又直掉哈喇子。都不像尤大的风格(抖个机灵)。

v3.0.0 One Piece 原文: Releases · vuejs/vue-next
QC.L 翻译: QC.L：[官宣] Vue 3.0 — One Piece 发布

这篇文章我们会从对比Vue2、Vue3应用实例的创建开始, 对比两种架构风格结束,下篇文章开始进行逐行的分析。

创建一个实例

创建一个新的Vue应用程序实例提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。

Vue2.x

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue.createApp(/* options */)
Vue.createApp(/* options */).mount('#app')

可以看到，Vue.js 3.0 初始化应用的方式和 Vue.js 2.x 差别并不大，本质上都是把组件挂载到 id 为 app 的 DOM 节点上。

先来看下Vue2.x它的内部实现：

(function(global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
		typeof define === 'function' && define.amd ? define(factory) :
		(global.Vue = factory());
})(this, function() {
function initMixin(Vue) {
         Vue.prototype._init = function(options) {
	         //...
		//选项合并
		vm.$options = mergeOptions(
			resolveConstructorOptions(vm.constructor),
			options || {},
			vm
		);
                //...
		//组件挂载
		if (vm.$options.el) {
			vm.$mount(vm.$options.el);
		}
	}
}

var Vue = function(options) {
     this._init(options);
}

//模板以编译成render function或组件手写render function执行此函数
function mountComponent(vm, el, hydrating) {
	//...
	//_update()  把Virtual DOM映射成真正的DOM
	updateComponent = function() {
	    vm._update(vm._render(), hydrating);
	};

	//创建渲染函数观察者
	new Watcher(vm, updateComponent, noop, {
		before: function before() {
			if (vm._isMounted && !vm._isDestroyed) {
				callHook(vm