vue2源码-- 其他全局 api

Posted 2022-11-23 在厕所喝茶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2源码-- 其他全局 api相关的知识，希望对你有一定的参考价值。

Vue.directive、Vue.filter、Vue.component

作用

Vue.directive：注册指令
Vue.filter：注册过滤器
Vue.component：注册组件

原理分析

1、Vue的原型上面存在一个静态属性options，这个属性在是全局的配置，在初始化每个vue实例的时候，都会跟用户传入的配置进行合并操作

2、实际上是保存到vue.options中，这样子组件在合并选项的时候就可以拥有这些全局变量了

源码

源码位于src/core/global-api/assets.js

import  ASSET_TYPES  from "shared/constants";
import  isPlainObject, validateComponentName  from "../util/index";

// 'component',
// 'directive',
// 'filter'
export function initAssetRegisters(Vue: GlobalAPI) 
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach((type) => 
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void 
      if (!definition) 
        // 获取资源
        return this.options[type + "s"][id];
       else 
        // 注册指令
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== "production" && type === "component") 
          validateComponentName(id);
        
        if (type === "component" && isPlainObject(definition)) 
          // 如果对象中不存在name属性，就是用id所谓name属性
          definition.name = definition.name || id;
          // Vue.extend() 创建子组件，返回子类构造器
          definition = this.options._base.extend(definition);
        
        if (type === "directive" && typeof definition === "function") 
          definition =  bind: definition, update: definition ;
        
        // 添加到options全局配置
        this.options[type + "s"][id] = definition;
        return definition;
      
    ;
  );

Vue.use

作用

注册插件，插件必须是一个包含install函数的对象或者是一个函数

原理分析

1、检查是否已经安装过了，防止重复安装

2、从第二个参数开始，获取剩余的参数，同时将this，也就是vue插入到参数数组的第一个位置，因为后续调用install的时候，vue 参数必须是作为第一个

3、如果plugin提供了install方法，那么，就调用plugin.install方法。如果plugin是一个函数，那么，就执行函数

4、最后将插件添加到插件列表中

源码

源码位于src/core/global-api/use.js

import  toArray  from "../util/index";

export function initUse(Vue: GlobalAPI) 
  Vue.use = function (plugin: Function | Object) 
    const installedPlugins =
      this._installedPlugins || (this._installedPlugins = []);
    if (installedPlugins.indexOf(plugin) > -1) 
      // 检查是否已经被安装过了，防止重复安装
      return this;
    

    // 获取剩下的参数
    const args = toArray(arguments, 1);
    // 同时将vue插入到第一个位置
    // 因为后续调用install的时候，vue参数必须作为第一个
    args.unshift(this);
    if (typeof plugin.install === "function") 
      // 如果提供了一个install方法的对象
      plugin.install.apply(plugin, args);
     else if (typeof plugin === "function") 
      // 传入的是一个函数
      plugin.apply(null, args);
    
    // 添加到插件列表
    installedPlugins.push(plugin);
    return this;
  ;

Vue.mixin

作用

给每个vue实例混入自定义的行为

原理分析

1、将传入的mixin对象与Vue.options合并，然后将合并后的新对象赋值给Vue.options

2、每个vue实例在初始化的都会跟Vue.options进行合并，合并规则如下： - 生命周期（created，mounted等）合并成一个数组，依次执行 - props，data，computed，methods，components，filters出现同名的会进行覆盖，组件的优先级更高 - watcher出现同名时，合并为数组，数据发生变化时，依次执行

源码

源码位于src/core/global-api/mixin.js

import  mergeOptions  from "../util/index";

export function initMixin(Vue: GlobalAPI) 
  Vue.mixin = function (mixin: Object) 
    // 修改Vue.options属性，从而影响后面所有的vue实例
    this.options = mergeOptions(this.options, mixin);
    return this;
  ;