Vue.use和Vue.prototype

import Vuex from 'vuex'
Vue.use(Vuex) // vuex本质上也是vue的一个插件
import utils from '../src/utils' // 工具函数
Vue.prototype.$utils = utils 

首先看一下概念化的区别

1.不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式

2.非vue官方库不支持new Vue()方式

3.每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。

啥玩意,还是自己研究一下吧

Vue.use源码实现

Vue.use = function (plugin) {
  if (plugin.installed) {
    return;
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else {
    plugin.apply(null, args);
  }
  plugin.installed = true;
  return this;
};

可以看到,用Vue.use的实现本质上还是调用的install方法,并且如果插件注册过的话不会多次注册,那么如果想使用Vue.use就必须有install方法,并且必须在实例化(new Vue)之前,比如要注册一个全局组件

import VAlert from './v-alert.vue'

export default {
  install (Vue) {
    Vue.component('VAlert ', VAlert )
  }
}

至于Vue.prototype.$xx 就可以全局使用xx.mm 我想了解js原型的同学都能理解,在vue组件实例化以后,每个组件都可以读取$xx,即实现全局调用方法

所以从实现原理上来说其实没什么区别,都是在Vue.prototype上添加了一个方法,只不过实现上稍有区别

Vue.use()是将插件的逻辑封装成一个对象最后在install编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简,可拓展性也比较高。
Vue.prototype.$xx则是将所有逻辑都编写成一个函数暴露给Vue。
其实两种方法原理都一样,无非第二种就是将这个插件直接当成install函数来处理。

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值