189 8069 5689
这篇文章将为大家详细讲解有关Vue.use()在new Vue()之前使用的原因是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
使用Vue前端框架开发有些时间了，官方文档对于插件开发也有详细的介绍。最近强迫症犯了，老在想为什么Vue.use函数执行，要在Vue实例化即new Vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。
先看Vue.use做了什么
Vue.use = function (plugin: Function | Object) {
//Vue构造函数上定义_installedPlugins 避免相同的插件注册多次
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// import是单例模式
//所以plugin不论是Fuction还是Object同一个插件都是同一个
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
// Vue作为第一个参数传递给插件
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 // 返回的是this,可以链式调用
}do:
检查插件是否已经注册，相同的插件只注册一次
将Vue构造函数作为第一个参数，作为插件注册调用
根据插件形式选择调用plugin.install还是plugin
存储已注册插件，用于插件是否已注册检验
Vue.prototype._init中合并options
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
...
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
...
// 挂载到dom上
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}在new Vue(options)时首先会执行this._init进行初始化，将Vue上的属性和options进行合并，然后在进行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函数也是在这里进行调用
如果Vue.use在new Vue()之后执行，this._init()时你使用的插件的内容还没有添加到Vue.options.components、Vue.options.directives、Vue.options.filters等属性中。所以新初始化的Vue实例中也就没有插件内容
关于“Vue.use()在new Vue()之前使用的原因是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。