Vue2.0源码学习(4)-合并配置

博客 分享
0 251
张三
张三 2022-02-20 16:55:34
悬赏:0 积分 收藏

Vue2.0源码学习(4) - 合并配置

合并配置

通过之前的源码学习,我们已经了解到了new Vue主要有两种场景,第一种就是在外部主动调用new Vue创建一个实例,第二个就是代码内部创建子组件的时候自行创建一个new Vue实例。但是无论那种new Vue方式,我们都需要进入了Vue._init,执行mergeOptions函数合并配置。为了更直观,我们整个demo调试耍耍。

// src\main.jslet childComp = {  template:"<div>{{msg}}</div>",  data(){    return{      msg:"childComp"    }  },  created(){    console.log("childComp created");  },  mounted(){    console.log("childComp mounted");  }}Vue.mixin({  created(){    console.log("mixin");  }})let app = new Vue({  el:"#app",  render: h => h(childComp)})

我用的时vue-cli3,这里有个小细节需要注意一下,vue-cli3开发环境默认使用的是runtime版本(node_modules\vue\dist\vue.runtime.esm.js),这个版本是不支持编译template的,需要用Compiler版本,这个在vue.config.js中配置一下即可,配置代码如下:

module.exports = {    runtimeCompiler: true}

准备工作搞好了,那么我们现在开始进入_init函数,看看合并配置是怎么一个说法。

// src\core\instance\init.jsVue.prototype._init = function (options?: Object) {    ...    if (options && options._isComponent) {      // optimize internal component instantiation      // since dynamic options merging is pretty slow, and none of the      // internal component options needs special treatment.      initInternalComponent(vm, options)    } else {      vm.$options = mergeOptions(        resolveConstructorOptions(vm.constructor),  //vue.options        options || {},  //new Vue中的options        vm      )    }    ...}

外部调用场景

上述代码中可明显看出两中合并配置的情况,我们一开始进入的肯定时非组件模式,也就是else情况。mergeOptions传入了3个入参,我们先看第一个入参的resolveConstructorOptions方法做了什么。

// src\core\instance\init.jsexport function resolveConstructorOptions (Ctor: Class<Component>) {  let options = Ctor.options  if (Ctor.super) {    const superOptions = resolveConstructorOptions(Ctor.super)    const 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)      const 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}

入参Ctor = vm.constructor = Vue,Vue没有父级,所以不会进入到if逻辑,因此这里返回的就是Vue.options的配置。Vue.options则在初始化的时候就做了定义和配置。

// src\core\global-api\index.jsVue.options = Object.create(null)ASSET_TYPES.forEach(type => {    Vue.options[type + 's'] = Object.create(null)})Vue.options._base = Vue     //createComponent时用到,之前提及过。extend(Vue.options.components, builtInComponents)   //扩展一些内置组件

这里ASSET_TYPES在src\shared\constants.js有定义

// src\shared\constants.jsexport const ASSET_TYPES = [  'component',  'directive',  'filter']

然后我们再返回去_init函数分析一下mergeOptions函数:

// src\core\util\options.jsexport function mergeOptions (  parent: Object,  child: Object,  vm?: Component): Object {  ...    const options = {}  let key  、、  for (key in parent) {    mergeField(key)  }  for (key in child) {    //   key没在parent定义时    if (!hasOwn(parent, key)) {      mergeField(key)    }  }  function mergeField (key) {    const strat = strats[key] || defaultStrat    options[key] = strat(parent[key], child[key], vm, key)  }  return options}

简略了部分代码,我们先去关注合并的关键代码。
这边其实就是遍历了parent(Vue.options)和child(new Vue中的options),然后遍历的过程中调用了mergeField方法。而该方法先去拿到一个strat函数,这个函数首先是再strats中去找,没找到就使用defaultStrat默认函数(defaultStrat可自行查阅源码),我们主要看strats:

// src\core\util\options.jsconst strats = config.optionMergeStrategies

strats是定义在config中,所以说我们是可以随意改动strats的。然后在options.js中,strats扩展了很多属性,每个属性(key)都是一种合并策略,有兴趣的可以一个个研究,因为我们例子是生命周期的合并,所以我们先挑生命周期的合并策略来分析,后面遇到其他的再做分析。

// src\core\util\options.jsLIFECYCLE_HOOKS.forEach(hook => {  strats[hook] = mergeHook})

LIFECYCLE_HOOKS定义在src\shared\constants.js

// src\shared\constants.jsexport const LIFECYCLE_HOOKS = [  'beforeCreate',  'created',  'beforeMount',  'mounted',  'beforeUpdate',  'updated',  'beforeDestroy',  'destroyed',  'activated',  'deactivated',  'errorCaptured']

遍历这些值,然后定义它们的合并策略,其实都mergeHook方法,都是一样的合并策略,下面我们看看mergeHook函数:

// src\core\util\options.jsfunction mergeHook (  parentVal: ?Array<Function>,  childVal: ?Function | ?Array<Function>): ?Array<Function> {  return childVal    ? parentVal      ? parentVal.concat(childVal)      : Array.isArray(childVal)        ? childVal        : [childVal]    : parentVal}

这个多层嵌套的三元表达式看着复杂,其实不难,我们可以分段理解:
①:childVal有值:进入②,
       childVal没值:赋值parentVal;
②:parentVal有值:parentVal和childVal数组合并,
       parentVal没值:进入③;
③:childVal是个数组:赋值childVal,
       childVal不是数组:赋值[childVal];
最终我们return了一个数组到mergeOptions函数。

现在我们回过头来demo中的Vue.mixin定义,其源码其实也调用了mergeOptions,我们看看源码:

// src\core\global-api\mixin.jsexport function initMixin (Vue: GlobalAPI) {  Vue.mixin = function (mixin: Object) {    this.options = mergeOptions(this.options, mixin)    return this  }}

mixin的源码很简单,其实就是调用了mergeOptions对Vue.options做了合并。有个小细节需要留意,就是demo中Vue.mixin和new Vue的代码顺序,必须先对Vue.mixin做出定义,不然在new Vue的时候Vue.options和new Vue的options合并时,是会丢失掉Vue.mixin的,因为那时候Vue.mixin并没有执行mergeOptions把options合并到Vue.options上。

组件场景

接下来我们看另一种情况,组件合并配置。也就是在_inti方法中运行了initInternalComponent函数,我们来分析一下它做了什么?

// src\core\instance\init.jsexport function initInternalComponent (vm: Component, options: InternalComponentOptions) {  const opts = vm.$options = Object.create(vm.constructor.options)  // doing this because it's faster than dynamic enumeration.  const parentVnode = options._parentVnode  opts.parent = options.parent  opts._parentVnode = parentVnode  const vnodeComponentOptions = parentVnode.componentOptions  opts.propsData = vnodeComponentOptions.propsData  opts._parentListeners = vnodeComponentOptions.listeners  opts._renderChildren = vnodeComponentOptions.children  opts._componentTag = vnodeComponentOptions.tag  if (options.render) {    opts.render = options.render    opts.staticRenderFns = options.staticRenderFns  }}

子组件的合并就相对简单很多了,vm.$options去继承了子组件构造器vm.constructor.options,然后再把一些配置挂载到上面。我们主要看看vm.constructor.options是怎么来的。

// src\core\global-api\extend.jsVue.extend = function (extendOptions: Object): Function {    const Super = this    ...    const Sub = function VueComponent (options) {      this._init(options)    }    // 构造器指向自己    Sub.prototype.constructor = Sub    // 合并配置    Sub.options = mergeOptions(      Super.options,      extendOptions    )    ...}

其实Vue.extend的时候对子组件的构造器进行了定义了,还对Vue.options(Super.options)和子组件的options(extendOptions)做了合并。
所以initInternalComponent中的vm.$options其实就是一个已经把Vue.options和子组件的options合并好的配置集合了。

总结

至此Vue的options合并就告一段落了,我们需要知道它有两个场景,外部调用场景和组件场景。
其实一些库、框架的设计也是类似的,都会有自身的默认配置,同时又允许在初始化的时候让开发者自定义配置,之后再合并两个配置来达到应付各种场景需求,这种设计思想也是我们写组件或做架构的时候必不可少的思维模式。

posted @ 2022-02-20 15:09 Inès 阅读(1) 评论(0) 编辑 收藏 举报
回帖
    张三

    张三 (王者 段位)

    821 积分 (2)粉丝 (41)源码

     

    温馨提示

    亦奇源码

    最新会员