[Vue源码分析]Vue.use实现原理

最近小组有个关于vue源码分析的分享会,提前准备一下…

前言:
插件通常会为 Vue 添加全局功能,这个官网文档有说过了,如果对插件不了解,建议先阅读一下官网文档:https://cn.vuejs.org/v2/guide/plugins.html#使用插件

使用插件

插件的使用很简单,使用Vue.use注册后即可全局使用,比如项目中需要用到vue-router这个插件,如图引用即可:
在这里插入图片描述
接下来分析一下这个过程发生了什么。

Vue.use源码分析

Vue.use是通过initUse这个方法初始化的,方法如图:
在这里插入图片描述
①:Vue.use接受一个参数plugin,方法检测了installedPlugins这个数组中是否已经包含想要注册的组件,可知插件只允许被注册一次,二次注册是无效的。
②:调用toArray将转入的参数转换成数组,toArray源码如图:
在这里插入图片描述
③:把当前Vue对象this插入转化后的数组前
④:判断plugininstall是否是一个方法,如果是,则传入plugin及转化后的数组;此外,如果plugin本身就是一个方法,则传入转化后的数组,随后执行这个方法,由此可知Vue.use(插件)实际上会调用插件的install方法,并且调用use的时候是可以传参数的。
注:以上还可以知道,vue只会对plugin中的两种情况处理,即要么plugin中有install函数,要么plugin本身就是一个函数。
⑤:将注册后的插件推进installedPlugins,避免重复注册,返回当前实例,代码执行结束。

验证一下

(一)插件包含install方法的情况
(1)vue init一个HelloWorld工程,创建一个插件,命名plugin.js,如下如图:
在这里插入图片描述
以上插件输出了一下Vue.use()时传入的各个参数,随后给全局注册了一个myAdd方法。
(2)引用此插件
在这里插入图片描述
(3)引用已经注册的myAdd方法
在这里插入图片描述
(4)浏览器看结果
在这里插入图片描述

以下为installconsole.log的输出,可见第一个参数为Vue实例,与上边源码分析一致。
在这里插入图片描述
(二)插件本身为方法的情况
如图,创建plugin1.js,使用方法跟上边的例子一样,结果也是一样的,大家可以根据自己的喜好选择对应的方式。
在这里插入图片描述
注:往参数数组前插入当前vue对象的目的在于这样之后开发插件时就不用单独引入Vue了,减少了包体积,属于一种优化。如上,如果没有这样做的话,上边的插件例子就需要import Vue from 'vue',而不是直接使用vue,(注意:vue是传进来的参数,只不过我知道那个是vue实例,所以写成了vue)。

©️2020 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值