vue 疑问

1,相同的一个js文件导入了两次,那么他们相等吗?
回答:相等。

疑问:这样的结果,我没想通,plug与plug1即便是相同的文件,但是,也是导入了两次啊,每一次执行都是获取对象myPlugin,两次的myPlugin怎么会相等呢,这不是相当于定义了两次吗 ?就像 var p1={install:function(){}} , var p2={install:function(){}} , p1 == p2吗?false啊,不相等啊。百思不得其解plug == plug1 为何是true,所以,我只能这样理解:plug == plug1 实际上是引用类型 var p1=p2={install:{}} 这种形式,哎,先搁置吧,日后看看底层。

能证明上面的疑问了,证明 plug==plug // true 啦,如下:

疑问解除了!!
是这样的,我给Vue通过插件添加了全局函数,在install函数中定义了局部count(简单提一下:这里涉及到了闭包,延长了count的作用域链,只要函数globzzMessage没销毁,count就一直在哦!)
var count=1
Vue.globzzMessage = function () {
count++
console.log(‘全局的插件函数’, count)
}
分别在不同的组件中引入Vue ,然后分别调用这个函数改变count ,结果count是累加的,并没有因为切换组件重新执行导入Vue而把count初始化成1,所以,足以证明 es6中的import导入的插件方式是引用类型的方式,才出现了plug==plug1// true的现象。就像注册插件不能重复注册一样(源码中会先判断是否注册过了)

再次补充一下结论:

其实,与其说是引用类类型的方式解决了上述疑问,不如说是es6的modoule的加载方式,也就是es6的模块原理 导致这样的。es6的module原理是:import …from… 会在编译时将所有的模块依赖关系加载好,存入缓存中,当出现重复导入模块时,会从缓存中取模块加载好的结果。

测试的代码如下:

import Vue from 'vue'
import plug from './plugins/commonMsg.js'
import plug1 from './plugins/commonMsg.js'
import plugC from './plugins/commonMsgC.js'

console.log('同一段代码放入两个文件中导出plug == plugC对比?:', plug == plugC)
console.log('同一个文件被两次导入plug == plug1', plug == plug1)

双等号和三等号分别尝试了对比,结果一样:
在这里插入图片描述
在这里插入图片描述

参与对比的插件代码如下:
第一个文件:plugin/commonMsg.js

const myPlugin = {
  install(Vue, options) {
    Vue.prototype.zzMessage = function () {
      console.log((options && options.msg) || 'default msg...')
    }
  },
  age: 900
}

export default myPlugin

第二个文件:plugin/commonMsgC.js

const myPlugin = {
  install(Vue, options) {
    Vue.prototype.zzMessage = function () {
      console.log((options && options.msg) || 'default msg...')
    }
  },
  age: 900
}

export default myPlugin

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值