使用Vue.prototype 和 vue.use()实现全局方法的区别

转载自：https://www.jianshu.com/p/03c6b1b2941b

经常在main.js中看到
Vue.prototype.$xxx = xxx;

和使用vue.use()

api.js

我在学习使用的过程中，都实现了数据调用
想知道这两者的区别

首先，不管你采用哪种方式，最终实现的调用方式都是

vm.api()

也就是说，两种方法，实现的原理都是在 Vue.prototype 上添加了一个方法。所以结论是“没有区别”。

再来说说 Vue.use() 到底干了什么。

我们知道，Vue.use() 可以让我们安装一个自定义的Vue插件。为此，我们需要声明一个install 函数

// 创建一个简单的插件 say.js
var install = function(Vue) {
  if (install.installed) return // 如果已经注册过了，就跳过
  install.installed = true

  Object.defineProperties(Vue.prototype, {
    $say: {
      value: function() {console.log('I am a plugin')}
    }
  })
}
module.exports = install

然后我们要注册这个插件

import say from './say.js'
import Vue from 'vue'

Vue.use(say)

这样，在每个 Vue 的实例里我们都能调用 say 方法了。

我们来看 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;
};

其实也就是调用了这个 install 方法而已。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_35430000/article/details/96481708
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-22 14:01:27
阅读 ( 601 )
分类：前端

使用Vue.prototype 和 vue.use()实现全局方法的区别

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看