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设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
React 组件间的通信示例
Jun 14 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中的超全局变量
2006/10/09 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python批量启动多线程代码实例
2020/02/18 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
MYSQL支持事务吗
2013/08/09 面试题
预备党员思想汇报
2014/01/08 职场文书
工作失职检讨书范文
2014/01/16 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
诉讼和解协议书
2016/03/23 职场文书
节约用水广告语60条
2019/11/14 职场文书