Vue.extend 是 Vue 2 中的一個重要 API，用于基于一個組件配置對象創建一個“可復用的組件構造函數”。它是 Vue 內部構建組件的底層機制之一，適用于某些高級用法，比如手動掛載組件、彈窗動態渲染等。

?? 在 Vue 3 中已被移除，Vue 3 使用 defineComponent 替代組件定義方式，推薦改用 Composition API 和函數式組件模式。

🧩 Vue.extend 的基本用法

const MyComponent = Vue.extend({template: '<div>Hello {{ name }}</div>',data() {return {name: 'World'};}
});

這個 MyComponent 是一個構造函數，你可以像創建 Vue 實例一樣使用它：

const vm = new MyComponent();
vm.$mount('#app'); // 或者不傳參數，使用 vm.$mount() + DOM 操作手動插入

📦 使用場景舉例

? 動態創建組件實例（如彈窗）

const Popup = Vue.extend({template: '<div class="popup">我是彈窗</div>'
});const instance = new Popup();
instance.$mount(); // 不傳參數，不插入頁面
document.body.appendChild(instance.$el); // 手動掛載

? 結合 propsData 動態傳值

const Alert = Vue.extend({props: ['message'],template: '<div class="alert">{{ message }}</div>'
});const alertInstance = new Alert({propsData: {message: '操作成功'}
});
alertInstance.$mount();
document.body.appendChild(alertInstance.$el);

? 用于組件庫或插件封裝（如 Message、Toast）

很多組件庫（如 Element UI）內部使用 Vue.extend 構建彈窗或消息提示組件。

🔍深入理解：Vue.extend 做了什么？

本質上：

Vue.extend(ComponentOptions)

會返回一個新的組件構造函數，該構造函數是基于你傳入的選項創建的，繼承自 Vue 構造器，具備 Vue 實例的能力。

相當于內部做了：

function SubComponent() {Vue.call(this); // 繼承 Vue 構造器// ...
}
SubComponent.prototype = Object.create(Vue.prototype);

所以你可以這樣理解：

• Vue.extend 類似于類的繼承
• 生成的構造器可以多次 new 實例化
• 實例是完整的 Vue 實例，具備 data、methods、watch、生命周期等功能

? 注意事項

問題	原因
this.xxx 報錯	未通過 $mount 激活組件
propsData 無效	只能傳給 Vue.extend 的實例，而不是組件本身
內存泄漏	手動創建的組件需要手動 $destroy() 和移除 DOM

🚫 Vue 3 替代方案

Vue.extend 在 Vue 3 被移除，推薦使用：

? defineComponent + createApp

import { createApp, defineComponent } from 'vue';const Alert = defineComponent({props: ['message'],template: '<div>{{ message }}</div>'
});const app = createApp(Alert, { message: '你好 Vue 3' });
const container = document.createElement('div');
document.body.appendChild(container);
app.mount(container);

? 總結

內容	Vue.extend
定義方式	const Ctor = Vue.extend(options)
本質	返回繼承自 Vue 的構造函數
常見用途	彈窗、動態組件、組件庫
Vue 3 替代	defineComponent + createApp()

例子

Vue 2 彈窗組件的樣式增強版，加入了：

• ? 遮罩層（點擊遮罩可關閉）
• ? 居中彈出 + 陰影 + 圓角
• ? 動畫效果（淡入、淡出）
• ? 簡潔現代風格（仿 Element UI）

🗂? 目錄結構

├── index.html
├── main.js
├── MyDialog.js

📄 MyDialog.js — 定義彈窗組件

// MyDialog.js
import Vue from 'vue';const MyDialog = Vue.extend({props: ['message'],data() {return {visible: false};},mounted() {// 延遲顯示以觸發動畫setTimeout(() => this.visible = true, 10);},methods: {close() {this.visible = false;setTimeout(() => {this.$destroy();if (this.$el && this.$el.parentNode) {this.$el.parentNode.removeChild(this.$el);}}, 300); // 延遲移除以匹配動畫},onMaskClick(e) {if (e.target === this.$el) {this.close();}}},template: `<div class="dialog-mask" @click="onMaskClick"><div class="dialog-box" :class="{ 'dialog-show': visible, 'dialog-hide': !visible }"><p class="dialog-message">{{ message }}</p><button class="dialog-close" @click="close">關閉</button></div></div>`,style: `.dialog-mask {position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;background: rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;z-index: 9999;}.dialog-box {background: white;border-radius: 8px;padding: 20px 24px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);transform: scale(0.9);opacity: 0;transition: all 0.3s ease;min-width: 300px;}.dialog-show {transform: scale(1);opacity: 1;}.dialog-hide {transform: scale(0.9);opacity: 0;}.dialog-message {font-size: 16px;margin-bottom: 16px;}.dialog-close {background-color: #409eff;border: none;color: white;padding: 8px 16px;border-radius: 4px;cursor: pointer;}.dialog-close:hover {background-color: #66b1ff;}`
});// 注入樣式（確保樣式在頁面中）
const style = document.createElement('style');
style.textContent = MyDialog.options.style;
document.head.appendChild(style);export default MyDialog;

📄 main.js — 使用 Vue.extend 創建實例并掛載

// main.js
import Vue from 'vue';
import MyDialog from './MyDialog.js';new Vue({el: '#app',methods: {showDialog() {const DialogConstructor = MyDialog;const instance = new DialogConstructor({propsData: {message: '這是一個提示彈窗'}});instance.$mount(); // 手動掛載組件document.body.appendChild(instance.$el); // 插入到頁面}},template: `<div><button @click="showDialog">打開彈窗</button></div>`
});

📄 index.html — 引入腳本

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>增強版 Vue.extend 彈窗示例</title><style>/* 彈窗遮罩層樣式 */.dialog-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;z-index: 1000;}/* 彈窗內容樣式 */.dialog-content {background: #fff;padding: 20px;border-radius: 5px;text-align: center;min-width: 300px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}/* 過渡動畫 - 淡入淡出 */.dialog-fade-enter-active,.dialog-fade-leave-active {transition: opacity 0.3s;}.dialog-fade-enter,.dialog-fade-leave-to {opacity: 0;}</style>
</head>
<body><div id="app"></div><!-- Vue 2 官方 CDN --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 使用 type="module" 加載我們的腳本 --><script type="module" src="./main.js"></script>
</body>
</html>