IT이야기

Vue js에서 프로토타입을 사용하는 것과 플러그인을 사용하는 것의 차이점

cyworld 2022. 7. 25. 22:42
반응형

Vue js에서 프로토타입을 사용하는 것과 플러그인을 사용하는 것의 차이점

vue js 프로젝트에서 간단한 추적 서비스를 사용해야 합니다.

제 app.js에서는 두 가지 방법으로 사용할 수 있습니다.

예를 들어 다음과 같습니다.

1) 프로토타입을 작성하려면:

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 });
  }
}

둘 다 프로토타입을 사용하고 있고 둘 다 나한테는 효과가 있어그 두 가지 방법의 차이만 알면 돼

플러그인에는 다음 항목이 있어야 합니다.install사용한 것과 같은 자산:

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

플러그인을 사용하는 경우,Vue.use()방법

Vue.use(MyPlugin);

이것은, 단지,install플러그인의 메서드

당신의 경우, 당신은 단지 에 프로토타입을 세팅하고 있을 뿐입니다.Vue.

플러그인은 주로 vuej 프로젝트에 통합되는 서드파티 라이브러리 또는 자산을 개발하는 데 사용됩니다.

예를 들어 다른 사용자가 사용할 수 있는 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>

언급URL : https://stackoverflow.com/questions/47830206/difference-between-using-a-prototype-and-a-plugin-in-vue-js

반응형