vue源码学习笔记2(resolveConstructorOptions)

mergeOptions看完以后,回到initMixin来,注意到在mergeOptions函数中的parent参数是一个resolveConstructorOptions函数的返回值,

vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),        
    options || {},       
    vm      
);
//主体
function resolveConstructorOptions (Ctor) {
  var options = Ctor.options;
  if (Ctor.super) {
    var superOptions = resolveConstructorOptions(Ctor.super);
    var cachedSuperOptions = Ctor.superOptions;
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions;
      // check if there are any late-modified/attached options (#4976)
      var modifiedOptions = resolveModifiedOptions(Ctor);
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions);
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
      if (options.name) {
        options.components[options.name] = Ctor;
      }
    }
  }
  return options
}
复制代码

以上是函数主体,先是创建了一个options对象来保存当前ctor的iotionps,如果该ctor没有super属性就直接返回options,那么这个super是个什么东西呢,找找资料:

Ctor.super是通过Vue.extend构造子类的时候。Vue.extend方法会为Ctor添加一个super属性,指向其父类构造器

以上来源:https://segmentfault.com/a/1190000014587126

这时候还是去看看extend 函数把:

Vue.extend = function (extendOptions) {
extendOptions = extendOptions || {};//如果没有传入options则赋值为空对象
var Super = this;//指向vue构造器
var SuperId = Super.cid;//vue的id?  啥意思啊
var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});//是否已注册,有没有父组件,没有则为空
if (cachedCtors[SuperId]) {//如果有构造器组件,则直接返回构造器组件的id
  return cachedCtors[SuperId]
}

var name = extendOptions.name || Super.options.name;//创建name
if ("development" !== 'production' && name) {//跳过先
  validateComponentName(name);
}

var Sub = function VueComponent (options) {//创建Sub对象
  this._init(options);
};
Sub.prototype = Object.create(Super.prototype);//重新函数指向原型
Sub.prototype.constructor = Sub;//
Sub.cid = cid++;//给sub添加id
Sub.options = mergeOptions(//合并options
  Super.options,
  extendOptions
);
Sub['super'] = Super;//给sub添加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.
//对于props和computed属性,我们在
//扩展时扩展原型上的Vue实例。这个
//避免为每个创建的实例调用object.defineproperty。
if (Sub.options.props) {//在sub的原型上创建_props属性,并且按照props创建访问器属性添加到该属性上(为什么不直接放在sub上呢?)
  initProps$1(Sub);
}
if (Sub.options.computed) {//创建计算器属性,具体同上
  initComputed$1(Sub);
}

// allow further extension/mixin/plugin usage
Sub.extend = Super.extend;//复制构造器的extent属性
Sub.mixin = Super.mixin;//复制构造器的mixin属性
Sub.use = Super.use;//复制构造器的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.
//保持和父组件options的扩展性更新,即使extend已经被实例化
Sub.superOptions = Super.options;//父级options
Sub.extendOptions = extendOptions;//自己的options
Sub.sealedOptions = extend({}, Sub.options);//合并的options

// cache constructor
cachedCtors[SuperId] = Sub;//创建superId属性指向sub构造器
return Sub
};
复制代码

整整看了半天,得出:Ctor.superOptions=父级组件的options

那resolveConstructorOptions函数的目的也就比较好理解了:主要是解构获取构造器的options(函数名也能看出来),主要是其中有对于如果构造器也是extend添加的时候应该怎么处理,以及它们的构造器如果有更新扩展,需要及时更新到下级。

function resolveConstructorOptions (Ctor) {
    var options = Ctor.options;
    if (Ctor.super) {//是否有父级组件
        var superOptions = resolveConstructorOptions(Ctor.super);//递归解构父级组件,获取所有上级的options合集
        var cachedSuperOptions = Ctor.superOptions;//父级组件的options
        if (superOptions !== cachedSuperOptions) {//如果父级组件被改变过,更新superOptions
        // super option changed,
        // need to resolve new options.
         Ctor.superOptions = superOptions;
        // check if there are any late-modified/attached options (#4976)
        //检查是否有任何后期修改/附加选项
        var modifiedOptions = resolveModifiedOptions(Ctor);
         // update base extend options
         //更新扩展的options
         if (modifiedOptions) {
            extend(Ctor.extendOptions, modifiedOptions);
         }
        options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);//合并options
        if (options.name) {
            options.components[options.name] = Ctor;
        }
    }
  }
  return options
}复制代码

转载于:https://juejin.im/post/5c88689d5188257ed73dcb6f

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值