Vue.use()在new Vue() 之前使用的原因浅析

2019-11-19 10:58:06

字体：大中小

来源：转载

供稿：网友

使用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中合并optionsVue.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() 之前使用的原因浅析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：js实现指定时间倒计时效果

下一篇：微信小程序事件 bindtap bindinput代码实例