vue实例 与组件实例流程图

🧩 基本解释

✅ Vue 实例

Vue 实例是通过 new Vue({…}) 创建的对象，是整个应用的根节点。

const vm = new Vue({el: '#app',data: { msg: 'Hello Vue' }
});

• 是整个应用的起点。
• 只有一个根 Vue 实例（通常）。
• 控制整个页面或应用结构。

✅ 组件实例（Component Instance）

组件实例是通过注册组件后，在页面中 被创建出来的实例。

Vue.component('MyComp', {props: ['msg'],template: '<div>{{ msg }}</div>'
});<my-comp msg="hello" />

• 每个 会创建一个组件实例。
• 实际上是 Vue 的子类实例（通过 Vue.extend 实现）。
• 每个组件实例都有自己的作用域、数据、方法、生命周期。

📌 核心区别与联系

特性	Vue 实例	组件实例
创建方式	new Vue()	Vue.extend() 后 new SubComponent()
作用	整体应用入口	页面中一个局部功能单元
是否唯一	是	否，可以有多个
是否可嵌套	否（根）	可以嵌套
生命周期钩子	有	有（几乎一致）
el 选项	必须/可选	无（父组件控制挂载）

🧬 深入机制对比（Vue 2 源码视角）

✅ Vue 实例创建流程（new Vue()）

function Vue(options) {this._init(options); // 初始化逻辑
}

内部核心流程：

vm._init() =>mergeOptions =>initLifecycle =>initEvents =>initRender =>callHook(vm, 'beforeCreate') =>initState (data/props/computed/watcher) =>callHook(vm, 'created') =>vm.$mount(el) => 渲染、patch 挂载到 DOM

✅ 组件实例创建流程（通过模板解析出来）

在编译模板 → render → VNode → patch 时，会创建组件实例：

createComponent(VNode, ...) =>const Ctor = Vue.extend(options) =>const instance = new Ctor({ ... }) // 组件实例

也会调用 _init()，和根 Vue 实例一样的初始化过程！

所以组件实例其实和 Vue 实例没有本质差别，只是继承而来的子类实例。

✅ 组件与 Vue 实例共同点（来自 _init()）

• 生命周期钩子（created、mounted 等）
• 响应式系统（data、props）
• 渲染流程（render → vnode → patch）
• $watch、$set、$emit 等实例方法

🔍 组件实例的额外特点

• props：通过 initProps() 初始化。
• 父子关系：有 $parent, $children，用于组件通信。
• scoped slot、$refs、动态组件等扩展能力。

🔁 Vue 3 差异（简要对比）

特性	Vue 2	Vue 3
创建 Vue 实例	new Vue()	createApp()
组件实现方式	Vue.extend() + 构造函数	函数组件 + Proxy
响应式系统	Object.defineProperty	Proxy
Setup 函数	❌	✅ 核心入口，组件逻辑编写点

⸻

Vue 3 中 Vue 与组件的统一性更强：

// Vue 3 root
createApp(App).mount('#app');

App 本身就是组件，和子组件机制一致。

✅ 总结

结论点	内容
本质 组件实例是	Vue 实例的“子类实例”
初始化方式	都调用 _init() 进行统一初始化
区别点	Vue 实例是入口、组件实例是功能块，具有父子关系
Vue 3	通过函数式 API 统一组件与实例创建方式