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 統一組件與實例創建方式