前言
这章其实只讲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: '<p>1</p>',
created: [fn1]
})
const Child = Parent.extend({
name: 'Child',
template: '<p>2</p>',
created: [fn2]
})
Vue.mixin({
template: '<p>3</p>',
created: [fn3]
})
Child.mixin({
template: '<p>4</p>',
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: "<p>1</p>",
created: [fn3, fn1]
}
*/
const superOptions = resolveConstructorOptions(Ctor.super)
/**
{
components: {},
directives: {},
filters: {},
_base: function () {},
template: "<p>1</p>",
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: "<p4</p>",
created: [fn1, fn2, fn4]
}
*/
const latest = Ctor.options
// { template: '<p>2</p>', created: [fn2] }
const extended = Ctor.extendOptions
/**
{
components: {},
directives: {},
filters: {},
_base: function () {},
template: "<p>2</p>",
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之后改动的，也是新增的
