Vue.use(插件、参数)语法

参数：插件(功能|对象)

用法：

如果vue安装的组件类型必须是“功能”或“对象”，

如果是对象，则必须提供安装方法

如果是函数，它将作为安装函数直接执行

安装函数接受参数。默认情况下，第一个参数是Vue，随后的参数是注册组件时传入的参数

先给我一个？

让我们首先看一个简单的例子

首先，我用官方脚手架创建了一个新项目，vue init webpack vue-demo

然后我创建了两个文件.

我把这两个文件放在src/class/vue-use目录中

接下来，这两份文件就写好了

//文件： src/class/vue-use/plugins . jsconst plugin 1={ install(a，b，c) {console.log ('plugin1第一个参数： '，a)；Console.log('Plugin1第二个参数： '，b)；Console.log('Plugin1第三个参数： '，c)；},};函数plugin2 (a，b，c) {console.log ('plugin2第一个参数： '，a)；Console.log('Plugin2第二个参数： '，b)；Console.log('Plugin2第三个参数： '，c)；}导出{ Plugin1，plug in2 }；//文件： src/class/vue-use/index . js从' vue '导入vue；从“”导入{ Plugin1，Plugin2 }。/plugins '；Vue.use(Plugin1，“参数1”，“参数2”)；Vue.use(Plugin2，'参数a '，'参数b ')；然后我们在门户文件main.js中引用这段代码

//文件：src/main.js从“vue”导入vue；导入' @/class/vue-use '；从“”导入应用程序。/App '；从“”导入路由器。/router '；vue . config . production tip=false；/* ESL int-禁用no-new */new Vue({ el: '#app '，路由器，render: h=h(App)，})；此时，我们执行npm run dev，打开端口8080，打开开发和调试工具，并看到控制台输出以下信息

.]

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

Plugin2没有安装方法。它本身就是一个方法，也可以打印三个参数，第一个是Vue对象，第二个和第三个是我们传入的两个参数。

那么现在我们是否对Vue.use有了一个模糊的猜测~

分析源代码

好了，我们不要猜了，直接去看源代码

//Vue源文件路径：src/core/global-API/use . js import { to array } from './util/index ' export Function init use(vue :全局API){ vue . use=Function(plugin : Function | Object){ const installeddlugins=(this。_ installedPlugins | |(这。_ installedlugins=[]))if(installedlugins . indexof(plugin)-1){ return this }//附加参数const Args=to array(Args，1)Args . unshift(this)if(type of plugin . install==' function '){ plugin . install . apply(plugin，Args)} else if(plugin==' function '){ plugin。apply (null，args)}已安装的插件。push (plugin) return this}}从源代码可以发现，vue首先判断这个插件是否已经注册，不允许重复注册。

接收到的插件参数的限制是函数|对象。

这两种类型有不同的治疗方法。

首先，将我们传入的参数排列成一个数组=const args=toArray(arguments，1)。

(至数组源代码)

//Vue源文件路径：src/core/shared/util.js导出函数到数组(list:any，start？数字): Arrayany { start=start || 0让I=list . length-start const ret : Arrayany=new Array(I)while(I-){ ret[I]=list[I start]} ret }然后将Vue对象添加到该数组的起始位置args.unshift(this)，这里指向Vue对象

如果安装我们的插件(vue的第一个参数。use)是一种方法。也就是说，如果我们传入一个包含install方法的对象，那么我们调用这个插件的install方法，并将排序后的数组作为参数传入install方法。=plugin.install.apply (plugin，args)如果我们传入的插件是一个函数，那么我们将直接调用这个函数，并将排序后的数组作为参数传入。=plugin.apply(null，args)，然后将此插件添加到已经添加的插件数组中，表示它已经注册。=installedPlugins.push(plugin)最后返回Vue对象。

摘要

通过上面的分析，我们可以知道未来写插件有两种方式。

一种是将这个插件的逻辑封装到一个对象中，最后将install中编写的业务代码公开给Vue对象。这样做的好处是可以给这个对象添加任意参数，这样更容易更简洁地打包安装函数，并且具有更高的可扩展性。

另一种是将所有逻辑写入一个函数，并将其暴露给Vue。

其实这两种方法的原理是一样的，只是第二种是把这个插件直接当作一个安装函数。

个人认为第一种方法更合理。

举个例子？

导出常量插件={install (vue) {vue.component.vue.mixins.某视频剪辑软件.//我们也可以在install中执行其他功能。Vue会把这个指向我们的插件控制台。log (this)//{install:utils3360.} this . utils(vue)//执行utils函数console.log(this。COUNT) //0}。Utils (Vue) {vue.console.log (vue)//vue}，count :0 }//我们可以给这个对象添加参数，最后vue只会执行install方法。其他方法可以用作封装安装方法的辅助函数，const test=' test '导出函数plugin 2 (Vue) {vue.console . log(test)//“test”//请注意，如果插件是作为函数编写的，vue只会将其指向null。没有指向这个函数console.log(this) //null}//这样的话，我们只能在一个函数中编写插件逻辑，所以封装没有那么强，对vue源代码的理解暂时就在这里。欢迎多多指教~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。