Vue源码阅读（30）：Vue.directive、Vue.filter、Vue.component、Vue.use、Vue.mixin 源码解析

 我的开源库：

• fly-barrage 前端弹幕库，项目官网：https://fly-barrage.netlify.app/，可实现类似于 B 站的弹幕效果，并提供了完整的 DEMO，Gitee 推荐项目；
• fly-gesture-unlock 手势解锁库，项目官网：https://fly-gesture-unlock.netlify.app/，在线体验：https://fly-gesture-unlock-online.netlify.app/，可高度自定义锚点的数量、样式以及尺寸；

今天和大家讲讲标题中五个全局 API 的源码，这些 API 的内部实现都很简单。

1，Vue.directive，Vue.filter，Vue.component

在这里，将这三个 API 放在一起讲，因为这三个 API 在源码中的实现是放在一起的，这三个 API 的功能也很相似，都是向 Vue.options 对象上注册添加或者获取指定的资源，这里的资源是指 指令、过滤器和组件，通过将这些资源注册到 Vue.options 对象上，可以使得后续创建的组件实例可以使用到这些资源。

官方文档请点击 Vue.directive、Vue.filter、Vue.component。

下面的源码中使用到了 extend 方法，该方法的解析可以看我的这篇文章。 

对应的源码如下所示，代码量并不多，也很好理解，我写了大量的注释，看注释即可理解。

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  // ASSET_TYPES = [
  //   'component',
  //   'directive',
  //   'filter'
  // ]
  // 有三种资产：组件、指令、过滤器
  ASSET_TYPES.forEach(type => {
    // 该函数有两个作用：(1) 传递 definition 的时候，会进行资产的注册，最后会返回 definition
    //                 (2) 没有传递 definition 的时候，会直接返回指定 id 的 definition
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        // 如果没有传递 definition 的话，直接返回 id 对应的 definition
        return this.options[type + 's'][id]
      } else {
        // 下面进行资产的注册操作，其实所谓的注册操作：只是将要注册的东西找个地方存放起来而已，很简单。
       /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production') {
          if (type === 'component' && config.isReservedTag(id)) {
            // 判断注册组件的 tag 是不是 Vue 内置的组件，或者是 HTML 的保留标签
            warn(
              'Do not use built-in or reserved HTML elements as component ' +
              'id: ' + id
            )
          }
        }

        if (type === 'component' && isPlainObject(definition)) {
          // 进行组件 name 的处理，如果 definition 中没有 name 的话，则使用 id 作为组件的 name
          definition.name = definition.name || id
          // _base 属性其实就是 Vue 构造函数
          // 使用 Vue.extend 方法可以创建出 Vue 构造函数的子级构造函数
          // 该子级构造函数的 options 属性是包含 definition 的
          /// 组件的本质就是 Vue 构造函数的子级构造函数 ///
          definition = this.options._base.extend(definition)
        }
        // 指令必须是对象的形式，如果在这里提供的是函数类型的话，则包装成对象的形式
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        // 将处理好的资产保存到 options 对象中，数据结构如下所示：
        // options: {
        //   components:{
        //     id1: definition1,
        //     id2: definition2,
        //   },
        //   directives:{
        //     id3: definition3,
        //     id4: definition4,
        //   },
        //   filters:{
        //     id5: definition5,
        //     id6: definition6,
        //   }
        // }

        // 如果组件的 definition 是函数类型的话，不用做特殊的处理，直接保存到 options.components 中即可
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

2，Vue.use

建议先复习一下 Vue.use 的用法，点击这里。

Vue.use 刚开始看感觉挺神奇的，能够安装插件，但其实其内部实现原理很简单，无非就是将 Vue 作为参数执行 install 方法，在我们自定义的 install 方法内部，可以使用 Vue 上的全局 API，例如：Vue.filter、Vue.component、Vue.mixin 等方法全局增强 Vue 的功能，由此就达到了安装插件的目的。

Vue.use 定义在 src/core/global-api/use.js，源码如下所示，该方法很简单，我写了大量的注释，看注释即可理解。

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // installedPlugins 数组用于保存已经安装了的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      // 如果当前注册的插件已经被安装过了的话，则无需重新安装，直接 return 即可
      return this
    }

    // toArray 是一个工具函数，用于将一个类数组对象转换成真正的数组
    // 该函数的第一个参数是待转换的类数组对象
    // 该函数的第二个参数是指从类数组的哪一个元素开始转换，这里从第二个元素开始转换
    //
    // 那么为什么从第二个元素开始转换呢？这是因为当我们使用 Vue.use 的时候，调用情形如下所示
    // Vue.use(MyPlugin, { someOption: true })
    // 可以发现，use 方法的第一个参数是插件（这个插件有可能是对象或者是函数）,第二个参数是配置对象
    // 而 install 方法的参数是 (Vue,配置对象)，所以在这里需要从第二个元素开始转换
    const args = toArray(arguments, 1)
    // 此时 args = [配置对象]，install 方法还需要 Vue 参数，在当前执行环境下，this 就是 Vue
    // 因此，在这里，调用 args.unshift(this) 将 Vue 添加到 args 数组的前面
    // args = [Vue, 配置对象]
    args.unshift(this)
    // 插件有可能是数组或者函数。如果是函数的话，则直接将其当做 install，
    // 如果是对象的话，则这个对象内应该定义 install 方法
    if (typeof plugin.install === 'function') {
      // 这里处理插件是对象的情况，此时执行 plugin.install.apply(plugin, args)
      // 在这里，因为 install 定义在 plugin 中，所以 apply 的第一个参数是 plugin 本身
      // install 函数中的 this 指向 plugin
      // apply 的第二个参数是 args = [Vue, 配置对象]，这会成为 install 方法的参数
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      // 如果插件是函数的话，则直接将插件当做 install 函数进行调用
      plugin.apply(null, args)
    }
    // 将当前安装的插件保存到 installedPlugins 数组中
    installedPlugins.push(plugin)
    return this
  }
}

3，Vue.mixin

Vue.mixin 方法定义在 src/core/global-api/mixin.js，直接看源码。

export function initMixin (Vue: GlobalAPI) {
  // Vue.mixin 的作用是将 mixin 对象混入到 Vue.options 之中
  // 之后每次 new Vue 的时候，还会将子组件的 options 和 Vue.options 合并到一起
  // 这样，该子组件就能够访问使用到 mixin 中的属性和方法了
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

该方法的内部通过 mergeOptions 方法实现功能，mergeOptions 方法的详细解析可以看我的这篇文章。