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

 更新时间:2019年08月26日 09:41:30   作者:猕猴桃豆老大  
本文通过实例代码给大家介绍了为什么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:

  1. 检查插件是否已经注册,相同的插件只注册一次
  2. 将Vue构造函数作为第一个参数,作为插件注册调用
  3. 根据插件形式选择调用plugin.install还是plugin
  4. 存储已注册插件,用于插件是否已注册检验
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() 之前使用的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Nuxt.js实战和配置详解

    Nuxt.js实战和配置详解

    这篇文章主要介绍了Nuxt.js实战和配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vuex模块化与持久化深入讲解

    Vuex模块化与持久化深入讲解

    在实际项目开发过程中,如果公共数据比较多我们会使用vuex做公共状态管理,但是在对浏览器进行刷新操作的时候,会导致vuex内的数据丢失,这种情况有些时候是没问题的,但是有的时候我们需要某些数据可以持久化的保存,这样就需要做对应的处理
    2023-01-01
  • 基于vue封装一个安全键盘组件

    基于vue封装一个安全键盘组件

    大部分中文应用弹出的默认键盘是简体中文输入法键盘,在输入用户名和密码的时候,如果使用简体中文输入法键盘,用户的输入记录会被缓存下来所以我们需要一个安全键盘,本文给大家介绍了如何基于vue封装一个安全键盘组件,需要的朋友可以参考下
    2023-12-12
  • Vue中的Computed实现原理分析

    Vue中的Computed实现原理分析

    这篇文章主要介绍了Vue中的Computed实现原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue 列表页跳转详情页获取id以及详情页通过id获取数据

    vue 列表页跳转详情页获取id以及详情页通过id获取数据

    这篇文章主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue-cli脚手架创建项目遇到的坑及解决

    vue-cli脚手架创建项目遇到的坑及解决

    这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue+canvas实现视频截图功能

    Vue+canvas实现视频截图功能

    这篇文章主要为大家详细介绍了Vue+canvas实现视频截图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue动态删除从数据库倒入列表的某一条方法

    vue动态删除从数据库倒入列表的某一条方法

    今天小编就为大家分享一篇vue动态删除从数据库倒入列表的某一条方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue-cli 移动端布局和动画使用详解

    Vue-cli 移动端布局和动画使用详解

    这篇文章主要介绍了Vue-cli和移动端布局和动画使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue父子传值,兄弟传值,子父传值详解

    vue父子传值,兄弟传值,子父传值详解

    这篇文章主要介绍了Vue传值-三种常用传值示例,主要介绍了父组件向子组件进行传值,子组件向父组件传值和非父子组件进行传值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论