浅谈Vue.use的使用
vue.use(plugin, arguments) 语法
参数:plugin(function | object)
用法:
如果vue安装的组件类型必须为function或者是object
如果是个对象,必须提供install方法
如果是一个函数,会被直接当作install函数执行
install函数接受参数,默认第一个参数为vue,其后参数为注册组件时传入的arguments
先举个?
我们先来看一个简单的事例
首先我使用官方脚手架新建一个项目vue init webpack vue-demo
然后我创建两个文件index.js plugins.js.
我将这两个文件放置在src/classes/vue-use目录下
接下来对这两个文件进行编写
// 文件: src/classes/vue-use/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 };
// 文件: src/classes/vue-use/index.js import vue from 'vue'; import { plugin1, plugin2 } from './plugins'; vue.use(plugin1, '参数1', '参数2'); vue.use(plugin2, '参数a', '参数b');
然后我们在入口文件main.js引用这段代码
// 文件: src/main.js import vue from 'vue'; import '@/classes/vue-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对象,第二个跟第三个也是我们传入的两个参数。
那么现在我们是不是大概对vue.use有一个模糊的猜想~
分析源码
好我们还是不要猜想,直接上源码
// 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)。
(toarray源码)
// vue源码文件路径:src/core/shared/util.js export function toarray (list: any, start?: number): array<any> { start = start || 0 let i = list.length - start const ret: array<any> = new array(i) while (i--) { ret[i] = list[i + start] } return ret }
再将vue对象添加到这个数组的起始位置args.unshift(this),这里的this 指向vue对象
如果我们传入的plugin(vue.use的第一个参数)的install是一个方法。也就是说如果我们传入一个对象,对象中包含install方法,那么我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中。 => plugin.install.apply(plugin, args)
如果我们传入的plugin就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)
之后给这个插件添加至已经添加过的插件数组中,标示已经注册过 => installedplugins.push(plugin)
最后返回vue对象。
小结
通过以上分析我们可以知道,在我们以后编写插件的时候可以有两种方式。
一种是将这个插件的逻辑封装成一个对象最后将最后在install编写业务代码暴露给vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简,可拓展性也比较高。
还有一种则是将所有逻辑都编写成一个函数暴露给vue。
其实两种方法原理都一样,无非第二种就是将这个插件直接当成install函数来处理。
个人觉得第一种方式比较合理。
举个?
export const plugin = { install(vue) { vue.component... vue.mixins... vue... // 我们也可以在install里面执行其他函数,vue会将this指向我们的插件 console.log(this) // {install: ...,utils: ...} this.utils(vue) // 执行utils函数 console.log(this.count) // 0 }, utils(vue) { vue... console.log(vue) // vue }, count: 0 } // 我们可以在这个对象上添加参数,最终vue只会执行install方法,而其他方法可以作为封装install方法的辅助函数 const test = 'test' export function plugin2(vue) { vue... console.log(test) // 'test' // 注意如果插件编写成函数形式,那么vue只会把this指向null,并不会指向这个函数 console.log(this) // null } // 这种方式我们只能在一个函数中编写插件逻辑,可封装性就不是那么强了
小弟不才,对vue源码的理解暂且到这。欢迎大佬们多指教~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。