解析构造函数的options

前言

这章其实只讲src/core/instance/init.js里的resolveConstructorOptions函数。
这个函数水有点深，网上的很多文章都没说全，所以单独拎出来

正文

首先来个栗子

const fn1 = function fn1() {
    console.log('fn1')
}
const fn2 = function fn2() {
    console.log('fn2')
}
const fn3 = function fn3() {
    console.log('fn3')
}
const fn4 = function fn4() {
    console.log('fn4')
}
const Parent = Vue.extend({
    template: '
1
',
    created: [fn1]
})
const Child = Parent.extend({
    name: 'Child',
    template: '
2
',
    created: [fn2]
})
Vue.mixin({
    template: '
3
',
    created: [fn3]
})
Child.mixin({
    template: '
4
',
    created: [fn4]
})
new Child({}).$mount('#app')

当我们计算Child的options的时候我们不能简单的取Child.options，因为后面其父父类Vue混入了options，其本身也混入了options。这时候我们取得Child.options会漏了Vue.mixin混入的options。
这也是很好理解，因为Child.options在Child = Parent.extend()之后除了Child.mixin()就没改过，但是Vue.mixin()导致Vue.options改变了，所以本该继承下来的没继承

resolveConstructorOptions就是为了解决这个问题，因为就出在父类的变化，所以它的思想就是把判断父类的options是否变化，变化了的话就把继承下来的和.extend、.mixin扩展的区分开来，后者算新增的，前者是继承的。俩者合并就是新的options

resolveConstructorOptions

就像标题所述，这个是解析传入的构造函数的options，然后返回新的options（内部会修正一些变量）
首先我们假设下面的Ctor是在Child的时候的情况对于上文的栗子而言

export function resolveConstructorOptions(Ctor: Class < Component > ) {
    let options = Ctor.options
    if (Ctor.super) {
        const superOptions = resolveConstructorOptions(Ctor.super)
        const cachedSuperOptions = Ctor.superOptions
        if (superOptions !== cachedSuperOptions) {
            Ctor.superOptions = superOptions
            const modifiedOptions = resolveModifiedOptions(Ctor)
            if (modifiedOptions) {
                extend(Ctor.extendOptions, modifiedOptions)
            }
            options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
            if (options.name) {
                options.components[options.name] = Ctor
            }
        }
    }
    return options
}

首先根据是否有super属性来判断是否是子类
若是是子类的话看看分支之内

/**
{
    components: {},
    directives: {},
    filters: {},
    _base: function () {},
    template: "
1
",
    created: [fn3, fn1]
}
*/
const superOptions = resolveConstructorOptions(Ctor.super)
/**
{
    components: {},
    directives: {},
    filters: {},
    _base: function () {},
    template: "
1
",
    created: [fn1]
}
*/
const cachedSuperOptions = Ctor.superOptions

首先获取父类(Parent)正确的options，然后获取执行Child = Parent.extend()时缓存的父类(Parent)的options。因为前者是当前父类(Parent)真实的options，所以俩者可以通过比较来判断之后是否改变过。
很明显改过了(Vue.mixin({...})导致Parent继承的值变了，也就导致其真实的options变了)
若是有改动的话就先修正

Ctor.superOptions = superOptions

然后到重要的点

const modifiedOptions = resolveModifiedOptions(Ctor)

就是它，解析新增的那部分options

resolveModifiedOptions

这个就是上面所说的获取通过.extend、.mixin新增的那部分options

function resolveModifiedOptions(Ctor: Class < Component > ): ? Object {
    let modified
    /**
    {
        components: {},
        directives: {},
        filters: {},
        _base: function () {},
        template: "",
        created: [fn1, fn2, fn4]
      }
    */
    const latest = Ctor.options
    // { template: '
2
', created: [fn2] }
    const extended = Ctor.extendOptions
    /**
    {
        components: {},
        directives: {},
        filters: {},
        _base: function () {},
        template: "
2
",
        created: [fn1, fn2]
      }
    */
    const sealed = Ctor.sealedOptions
    for (const key in latest) {
        if (latest[key] !== sealed[key]) {
            if (!modified) modified = {}
            modified[key] = dedupe(latest[key], extended[key], sealed[key])
        }
    }
    return modified
}

首先获取三个属性，我们单看created

• latest 最新的options。首先fn1是Parent继承而来，fn2是生成自身时传入的参数，fn4是Child.mixin混入的，至于fn3是Vue上，相对Child是祖父，不过因为是Parent生成之后才混入，所以就没继承到，所以需要修正
• extended 执行.extend传入的的options参数。这个很简单，就是生成Child时.extend传入的参数，也就是只有fn2
• sealed 执行.extend时options的数据副本（若是之后有变动，那么这个值将和.options的值不一样）。这个也简单，就是生成Child时Child.options的数据副本(也就是之后只要没修正都不会变动，所以叫sealed)。fn1是Parent继承而来，fn2是生成自身时传入的参数

然后遍历latest，要是值有了变化

if (latest[key] !== sealed[key]) {
    if (!modified) modified = {}
    modified[key] = dedupe(latest[key], extended[key], sealed[key])
}

那么就得判断这个值是否有重复（数组情况，比如生命周期钩子），这个所谓的重呢就是是否和父类继承过来的那部分重复了。很明显，这里的fn1就重了，因为是Parent继承来的

dedupe

去重函数

function dedupe(latest, extended, sealed) {
    if (Array.isArray(latest)) {
       ...
    } else {
        return latest
    }
}

首先判断传入的当前值是不是数组，如果不是，那么就直接返回最新值，否则的话

const res = []
// [fn1, fn2]
sealed = Array.isArray(sealed) ? sealed : [sealed]
// [fn2]
extended = Array.isArray(extended) ? extended : [extended]
for (let i = 0; i < latest.length; i++) {
    if (extended.indexOf(latest[i]) >= 0 || sealed.indexOf(latest[i]) < 0) {
        res.push(latest[i])
    }
}
// [fn2, fn4]
return res

我们可见首先规范化俩参数为数组，然后遍历最新值，这里这个if语句有点难理解
其实他走的俩策略

• 若是通过.extend传入的那么就不是继承来的
• 若不在sealed，那么必然是.extend之后改动的，也是新增的