[Vue源码分析]Vue.use实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下…前言:插件通常会为 Vue 添加全局功能,这个官网文档有说过了,如果对插件不了解,建议先阅读一下官网文档:https://cn.vuejs.org/v2/guide/plugins.html#使用插件使用插件插件的使用很简单,使用Vue.use注册后即可全局使用,比如项目中需要用到vue-router这个插件,如图引用即可:接下来分...
最近小组有个关于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
插入转化后的数组前
④:判断plugin
中install
是否是一个方法,如果是,则传入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)浏览器看结果
以下为install
中console.log
的输出,可见第一个参数为Vue实例,与上边源码分析一致。
(二)插件本身为方法的情况
如图,创建plugin1.js
,使用方法跟上边的例子一样,结果也是一样的,大家可以根据自己的喜好选择对应的方式。
注:往参数数组前插入当前vue对象的目的在于这样之后开发插件时就不用单独引入Vue了,减少了包体积,属于一种优化。如上,如果没有这样做的话,上边的插件例子就需要import Vue from 'vue'
,而不是直接使用vue
,(注意:vue
是传进来的参数,只不过我知道那个是vue实例,所以写成了vue
)。
更多推荐
所有评论(0)