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 相关文章推荐
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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/09/05 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Stop SQL Server
2007/06/21 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python映射拆分操作符用法实例
2015/05/19 Python
python线程中同步锁详解
2018/04/27 Python
python随机数分布random测试
2018/08/27 Python
python3获取当前目录的实现方法
2019/07/29 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
STP的判定过程
2012/10/01 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
毕业生自荐信范文
2015/03/05 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书