javascript - 在 Vue js 中使用原型(prototype)和插件的区别？

Question

我需要在我的 vue js 项目中使用一个简单的跟踪服务...

在我的 app.js 中，我可以通过两种方式使用它...

例如:-

1) 创建原型(prototype):

import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

2) 使用插件将服务合并到其中:

import axios from 'axios';

export default {
  install: function(Vue,) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios });
  }
}

两者都在使用原型(prototype)并且两种方式都对我有用...我只需要知道这两种方法之间的区别...

Answer 1

插件应该像您使用的那样具有 install 属性:

const MyPlugin = {
    install: function(Vue,) {
        Object.defineProperty(Vue.prototype, '$http', { value: axios });
    }
}

当你使用一个插件时，你应该调用 Vue.use() 方法

Vue.use(MyPlugin);

this.just 调用插件的install方法

在您的情况下，您只是在 Vue 上设置原型(prototype)。

插件主要用于开发要合并到其他 vuejs 项目中的第 3 方库或 Assets 。

例如，假设您开发了一个可供其他人使用的 vue 组件；

你这样定义一个插件:

import MyComponent from './path'

const MyPlugin = {
    install: function(Vue,) {
        Vue.component('my-component', MyComponent);
    }
}

export MyPlugin;

现在当你在 npm 上发布你的插件时，其他人可以按如下方式使用你的组件:

import MyComponent from 'MyComponent'


Vue.use(MyComponent);

现在 my-component 可以在任何其他组件中全局使用，并且可以用作:

<my-component></my-component>my-component>