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


Posted in Javascript onAugust 26, 2019

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

Javascript 相关文章推荐
Javascript中对象继承的实现小例
May 12 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
JS代码优化的8点建议
Feb 04 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 #Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
You might like
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
yii2实现 "上一篇,下一篇" 功能的代码实例
2017/02/04 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
Python实现图像几何变换
2015/07/06 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python实现杨氏矩阵查找
2019/03/02 Python
python opencv肤色检测的实现示例
2020/12/21 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
关于python中remove的一些坑小结
2021/01/04 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
小学新学期教师寄语
2014/01/18 职场文书
硕士生工作推荐信
2014/03/07 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
工程承包协议书
2014/04/22 职场文书
公司员工安全协议书
2014/11/21 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
旷工辞退通知书
2015/04/17 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
html5调用摄像头截图功能
2022/01/18 Javascript
把77A收信机改造成收音机
2022/04/05 无线电