vue extend实现原理
Vue.extend 的实现原理
Vue.extend 是 Vue.js 中用于创建子类构造函数的全局方法，其核心原理基于 JavaScript 的原型继承机制。以下是其关键实现逻辑：
原型继承与构造函数包装
Vue.extend 内部会创建一个新的构造函数 Sub，其原型链继承自 Vue 的原型。通过 Sub.prototype = Object.create(Vue.prototype) 实现原型链继承，确保子类拥有父类的全部能力。
function extend(extendOptions) {
const Super = this
const Sub = function VueComponent(options) {
this._init(options)
}
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
}静态属性合并
子类构造函数会继承父类的静态属性（如 component、directive 等），通过 Object.create(Super) 实现静态方法的继承：
Sub.options = mergeOptions(
Super.options,
extendOptions
)组件选项合并策略
当传入的 extendOptions 包含组件相关配置（如 props、methods 等）时，会通过 Vue 的选项合并策略进行处理。例如生命周期钩子会被合并为数组形式：
function mergeHook(parentVal, childVal) {
return childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
}缓存优化
Vue 会对通过 extend 创建的构造函数进行缓存，避免重复创建相同配置的子类：
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[cid]) {
return cachedCtors[cid]
}功能扩展点
最终返回的构造函数具备 Vue 的全部功能，并可以实例化为独立的 Vue 组件实例。这种设计实现了：
- 原型链继承保证基础功能
- 静态属性合并保留全局配置
- 选项策略处理实现灵活扩展
- 缓存机制优化性能
开发者可以通过该机制创建可复用的组件构造器，这是 Vue 组件系统的基础构建方式之一。
