当前位置: 首页 > Web前端 > JavaScript

美团面试官:你了解过Vue.use是怎么实现的吗?

时间:2023-03-26 22:24:49 JavaScript

这个api是做什么的?在看源码之前,先看一下官方文档中的说明,比较容易理解。根据Vue官方文档,此api用于安装Vue.js插件。如果插件是对象,则必须提供安装方法。如果插件是一个函数,它将被用作安装方法。在调用install方法时,会将Vue作为参数传入。Vue.use(插件);//输入参数类型Object|Function另外在文档中提到:这个方法需要在调用newVue()之前调用;当同一个插件多次调用install方法时,该插件只会安装一次;源码分析Vue.use的源码不到20行,在这个目录下:node_modules\vue\src\core\global-api\use.js源码内容如下:import{toArray}from'../util/index'exportfunctioninitUse(Vue:GlobalAPI){Vue.use=function(plugin:Function|Object){constinstalledPlugins=(this._installedPlugins||(this._installedPlugins=[]))if(installedPlugins.indexOf(plugin)>-1){returnthis}//附加参数constargs=toArray(arguments,1)args.unshift(this)if(typeofplugin.install==='function'){plugin.install.apply(plugin,args)}elseif(typeofplugin==='function'){plugin.apply(null,args)}installedPlugins.push(plugin)returnthis}}从源码可以看出接收到的插件类型通过Vue.use是函数|Object,与文档的描述一致。然后在下面的代码中通过this._installedPlugins记录安装的插件,然后判断传入的插件是否安装,如果安装了则不再安装,文档中也有提到。顺便说一句,判断插件是否安装,这里使用了indexOf方法,其实是向下兼容的,因为includes是ES2016语法。constinstalledPlugins=(this._installedPlugins||(this._installedPlugins=[]))if(installedPlugins.indexOf(plugin)>-1){returnthis}那么这里是这段代码:constargs=toArray(arguments,1)使用toArray方法,定义在node_modules\vue\src\shared\util.js:218。toArray函数的作用是将类数组对象转为数组(这里是arguments对象),然后第二个参数表示起始下标,这里传1表示忽略数组的第一个元素(即插入)。从上面的代码我们可以推断出Vue.use大概是这样使用的:Vue.use(plugin,arg1,arg2...)然后下面的代码在array:args.unshift(this)最终的args应该类似于:[Vue,arg1,arg2...]然后安装插件。如果插件本身是一个提供了install方法的对象,那么直接调用install方法,传入args。因为我们在args前面加上了Vue,所以Vue会作为第一个参数传入,和文档中描述的install方法获取Vue一致。如果插件本身是一个函数,那么直接调用这个函数来安装插件。if(typeofplugin.install==='function'){plugin.install.apply(plugin,args)}elseif(typeofplugin==='function'){plugin.apply(null,args)}然后记录查看已安装的插件,防止重复安装:installedPlugins.push(plugin)最后一步返回Vue进行链式调用:returnthis参考Vue.use(plugin)-Vue官方文档