Vue 2 中 Vue.extend 用于创建可复用组件构造器，需定义 data 为函数、禁用 el，注册后通过 Vue.component 全局使用，支持 props 通信与响应式更新。
Vue 2 中用 Vue.extend 创建全局可复用的构造器组件，核心是“先造构造器、再注册为全局、最后在模板中声明使用”。它不是直接挂载的实例，而是能反复生成新组件的“工厂函数”，适合需要统一行为但独立状态的场景（比如多个并存的提示框、弹窗）。
构造器定义：注意 data 必须是函数，不能写 el
组件选项对象写法和 new Vue() 类似，但有两个硬性约束：
- data 必须返回一个新对象，防止多个实例共享同一份数据
- 不能设置 el 选项，挂载由使用者控制（注册后由 Vue 自动处理）
- 支持 template、props、methods、computed 等常规选项
示例：
const AlertBox = Vue.extend({template: `
{{ msg }}
`,props: ['msg'],
data() {
return { visible: true };
},
methods: {
hide() { this.visible = false; }
}
});
注册为全局组件：调用 Vue.component
把构造器传给 Vue.component，指定一个自定义标签名，之后所有 Vue 实例都能识别该标签：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 注册后，Vue 内部会缓存这个构造器（_Ctor 池），重复注册同名组件不会重复创建
- 注册名建议用短横线格式（如
alert-box），符合 HTML 自定义元素规范
示例：
Vue.component('alert-box', AlertBox);之后就可以在任意 Vue 实例模板中这样用：
配合 props 实现动态内容传递
props 是构造器与外部通信的主要方式，必须显式声明：
- 在构造器中写
props: ['msg', 'type']，才能通过<alert-box msg="xxx"></alert-box>传入值 - propsData 是实例化时用的（如手动
new AlertBox({ propsData: {...} })），注册为全局组件后不走这一步，直接靠模板绑定 - props 值是响应式的，但只在初始化时注入；如需运行时更新，应通过事件或外部 state 控制
为什么不用 Vue.component 直接传对象？
你当然可以写 Vue.component('x', { template: '...' }) —— Vue 内部会自动调用 Vue.extend 包装它。但显式使用 Vue.extend 的价值在于：
- 可提前定义、复用同一个构造器多次（比如同时注册
alert-box和confirm-box，共用基础逻辑） - 便于封装带方法的组件（如
instance.show()、instance.close()），方便后续扩展 - 避免箭头函数导致
this失效（构造器内 methods/data 必须用普通函数）
