Vue2组件进阶如何使用 Vue.extend 构造器创建子组件实例

Vue.extend是Vue 2中创建可复用组件构造器的核心API，返回继承自Vue的子类构造函数，用于动态挂载弹窗/Toast等全局服务型组件，data必须为函数，不支持el选项，需手动挂载与销毁。

Vue.extend 是 Vue 2 中创建可复用组件构造器的核心方式，它返回一个继承自 Vue 的子类构造函数，适用于需要手动控制生命周期、动态挂载或封装弹窗/提示类组件的场景。它不是直接渲染的组件，而是“造组件的工厂”。

Vue.extend 构造器的基本创建与挂载

必须传入一个组件选项对象，其中 data 必须为函数，确保每个实例拥有独立数据；不能写 el 选项，挂载由实例自行控制。

1. 定义构造器：const Alert = Vue.extend({ template: '
   {{ msg }}
   ', props: ['msg'], data() { return { visible: true }; } });
2. 创建并挂载实例：const instance = new Alert({ propsData: { msg: '操作成功' } }); instance.$mount(); document.body.appendChild(instance.$el);
3. 卸载时需手动移除 DOM 并销毁：instance.$destroy(); instance.$el.remove();

结合 propsData 动态传参

构造器实例化时可通过 propsData 对象一次性注入 props 值，适合外部调用时传递上下文信息。

1. props 必须在构造器定义中声明（如 props: ['title', 'type']），否则不会被响应式处理
2. propsData 只在实例初始化时生效，后续不可修改；如需更新，应通过 $emit 或事件总线通信
3. 示例：new MessageBox({ propsData: { title: '确认删除', confirmText: '确定' } }).$mount()

用于封装全局服务型组件（如 Message/Toast）

Element UI、Mint UI 等库的 $message、$toast 方法底层都基于 Vue.extend 实现——每次调用生成新实例，避免状态污染。

1. 典型结构：构造器定义 → 创建实例 → 挂载到 body → 自动销毁（配合 timer 或 transition）
2. 建议统一管理实例引用，防止内存泄漏（例如用数组保存 active 实例，销毁时 pop）
3. 可扩展方法：在构造器中定义 show()、close() 等实例方法，提升调用语义

与 Vue.component 的关系及注意事项

Vue.component 内部会对传入的对象选项自动调用 Vue.extend 包装成构造器；但若需多次复用同一构造器创建不同实例（如多个弹窗并存），必须显式使用 Vue.extend。

1. 重复调用 Vue.extend 同一配置对象，会命中缓存（_Ctor 缓存池），返回相同构造器，性能友好
2. 不要在构造器中使用箭头函数定义 data/methods，this 指向会丢失
3. 构造器不支持 template 编译器未启用的环境（如运行时-only 构建），需预编译或改用 render 函数