avatar

macOS改变文件的创建时间

解释

Vue.use 其实就是一个 Vue 提供的全局 api , 我们在做项目的时候经常遇到要用一些不管是官方推荐的或者是第三方的插件, 例如 Vue-Router, Vuex, Element-UI 等等

这些第三方库和插件一般都是在项目的 main.js 文件中进行初始化, 且初始化的方法就是使用 Vue.use(插件名)

我们先来从使用到分析 Vue.use 是怎么实现的


语法

Vue.use(plugin, arguments)

  • 参数:

    {Object | Function} plugin

  • 用法:

    安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

    该方法需要在调用 new Vue() 之前被调用。

    install 方法被同一个插件多次调用,插件将只会被安装一次

  • 参考 插件


举个🌰

首先新建两个文件

plugin.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 文件: src/plugins.js
const Plugin1 = {
install(a, b, c) {
console.log('Plugin1 第一个参数:', a);
console.log('Plugin1 第二个参数:', b);
console.log('Plugin1 第三个参数:', c);
},
};

function Plugin2(a, b, c) {
console.log('Plugin2 第一个参数:', a);
console.log('Plugin2 第二个参数:', b);
console.log('Plugin2 第三个参数:', c);
}

export { Plugin1, Plugin2 };

index.js:

1
2
3
4
5
6
7
// 文件: src/use/index.js
import Vue from 'vue';

import { Plugin1, Plugin2 } from './plugins';

Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

然后在入口文件 main.js 里面引入 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 文件: src/main.js
import Vue from 'vue';

import '@/use';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
});

此时我们执行 npm run dev 打开 8080 端口开启开发调试工具可以看到控制台输出以下信息

从中可以发现我们在 plugin1 中的 install 方法编写的三个 console 都打印出来,第一个打印出来的是 Vue 对象,第二个跟第三个是我们传入的两个参数。

plugin2 没有 install 方法,它本身就是一个方法,也能打印三个参数,第一个是 Vue 对象,第二个跟第三个也是我们传入的两个参数。


分析源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Vue源码文件路径: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
}

// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}

从源码中我们可以发现 Vue 首先判断这个插件是否被注册过,不允许重复注册。

并且接收的 plugin 参数的限制是 Function | Object 两种类型。

对于这两种类型有不同的处理。

首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)

再将 Vue 对象添加到这个数组的起始位置 args.unshift(this) ,这里的this 指向 Vue 对象

如果我们传入的 plugin(Vue.use的第一个参数)install 是一个方法。也就是说如果我们传入一个对象,对象中包含 install 方法,那么我们就调用这个 plugininstall 方法并将整理好的数组当成参数传入 install 方法中。 => plugin.install.apply(plugin, args)

如果我们传入的 plugin 就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)

之后给这个插件添加至已经添加过的插件数组中,标示已经注册过 => installedPlugins.push(plugin)

最后返回 Vue 对象。


小结

通过以上分析我们可以知道,在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象最后将最后在 install 编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将 install 函数封装得更加精简,可拓展性也比较高。

还有一种则是将所有逻辑都编写成一个函数暴露给 Vue

其实两种方法原理都一样,无非第二种就是将这个插件直接当成 install 函数来处理。

个人推荐第一种。

文章作者: Kwin
文章链接: http://kw1n.cn/2020/03/25/20200324-macOS改变文件的创建时间/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kwin 's Blog
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论