在调用Vue.extend( options )
进行Vue实例初始化时,option.data
的类型必须是function,否则对导致该方法构造出的实例共享同一data对象。
具体原因分析如下:
Vue.extend
方法本身的返回值是一个构造函数,通过new调用返回的构造方法我们就可以得到一个vue实例对象。这个构造函数会调用core模块中的_init
函数已完成对象的初始化工作。
_init(option)
方法会读取option.data
。
如果option.data
是function类型,则执行这个方法得到data对象。如果不是方法类型,则直接使用这个对象作为data。
所以使用extend方法时,option.data
必须为function
Vue.extend = function (extendOptions: Object): Function {
extendOptions = extendOptions || {}
// this在这里指向Vue方法
const Super = this
const SuperId = Super.cid
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
const name = extendOptions.name || Super.options.name
// 返回的vue实例构造方法
const Sub = function VueComponent (options) {
this._init(options)
}
// Super就是Vue方法,Super.prototype上有_init方法
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
Sub.options = mergeOptions(
Super.options,
extendOptions
)
Sub['super'] = Super
// For props and computed properties, we define the proxy getters on
// the Vue instances at extension time, on the extended prototype. This
// avoids Object.defineProperty calls for each instance created.
if (Sub.options.props) {
initProps(Sub)
}
if (Sub.options.computed) {
initComputed(Sub)
}
// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub
}
// keep a reference to the super options at extension time.
// later at instantiation we can check if Super's options have
// been updated.
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// cache constructor
cachedCtors[SuperId] = Sub
return Sub
}
}