前言
这章其实只讲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之后改动的,也是新增的