关于Vue.prototype 和 vue.use()

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

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 方法而已。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,973评论 1 4
  • 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...
    Timmy小石匠阅读 1,394评论 0 11
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,244评论 0 6
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/218...
    TigerChain阅读 26,327评论 5 70
  • 一只灰雀,将梦想深埋进它的翅膀 这是在装成做梦的样子 到了天该亮的时辰,夜还没有醒来 有时候它也会真的睡去 偶尔,...
    冷冬年阅读 5,698评论 135 230