Vue.use가 무엇인지에 대한 간략한 토론은 무엇입니까?

Vue.use가 정확히 무엇인가요? 이 글에서는 Vue.use를 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

프로젝트 개발을 위해 Vue를 사용하다 보면 Vue.use를 통해 많은 휠이 사용되는 것을 볼 수 있는데, 굉장히 발전된 느낌을 줍니다. Vue.use来进行使用，感觉甚是高大上。

不过Vue.use到底是什么鬼？不妨来看个究竟。

其实这些轮子都可以称之为插件，它的功能范围没有严格的限制，一般包含如下几种：

1. 添加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡/组件等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

无论大小，插件要实现的功能无非就是上述这几种。但是，这并不妨碍我们创造出复杂的插件，不过我们还是希望给用户提供一个简单的使用方法，他不需要关注插件内部做了些什么。固Vue提供了use方法，专门来在new Vue()之前使用插件。

不管是官方提供的插件（例如vue-router、vuex），还是第三方的插件（例如ElementUI、ant）都是采用了此方式，不外乎插件内部的功能不同而已。当然，还有其他诸多此类插件，awesome-vue 就集合了大量由社区贡献的插件和库。

接下来，我们就来看下这个神秘的use方法是如何实现的。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  // 5. 注册全局组件
  Vue.component('myButton',{
    // ...组件选项
  })
}

Vue.use(MyPlugin,{
  // ...options
})

一个插件内部大概就是如上所示，其实也不外乎上述那几种东西，甚是简单。接下来我们就来看下真实的案例ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);
  // 添加实例方法
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };
  // 添加实例方法
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

我们不难发现，其实自己来实现一个插件也是超级简单，只要对外暴露一个install方法即可，在使用Vue.use的时候，会调用这个方法。所以我们只要将要实现的内容放到install内部即可。这样的好处就是插件需要一开始调用的方法都封装在install里面，更加精简和可拓展性更高。

大家可能也有注意到，这里的install其实是将所有的组件全部引入了。作为一个庞大的插件库，这样可能会有一些性能问题。用过的ElementUI的同学都知道，它是支持按需引入的，其实在上面的示例中也可以发现一些蛛丝马迹。

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

这里将每个组件都单独都导出了，而在每个组件内部，也类似的暴露了install来组件每个组件，这样就可以单独Vue.use每个组件，从而实现按需引入的目的。

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};
export default Alert;

除了上述内容之外，还有几点值得我们注意一下：

• 插件传入的如果是一个对象，则执行其install方法，如果是一个函数，则执行它自身，并bind this为null，然后传入额外的参数

if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
  plugin.apply(null, args);
}

• 如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性，其值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件

Vue.use

그런데 Vue.use가 도대체 ​​뭐죠? 한 번 살펴보고 무슨 일이 일어나는지 봅시다.

사실 이러한 휠은 플러그인이라고 부를 수 있으며 기능 범위는 엄격하게 제한되지 않습니다. 일반적으로 다음 유형이 포함됩니다.

1. 전역 메서드 또는 속성을 추가합니다. 예: vue-custom-element
2. 전역 리소스 추가: 지침/필터/전환/구성 요소 등 예를 들어 vue-touch
3. 글로벌 믹싱을 통해 일부 구성 요소 옵션을 추가합니다. 예를 들어, vue-router
4. 는 Vue.prototype에 추가하여 Vue 인스턴스 메서드를 추가합니다.
5. 위에 언급된 기능 중 하나 이상을 제공하면서 자체 API를 제공하는 라이브러리입니다. 예를 들어 vue-router

크든 작든 플러그인이 달성하고자 하는 기능은 위의 내용에 지나지 않습니다. 그러나 이것이 복잡한 플러그인을 만드는 것을 방해하지는 않지만 여전히 사용자에게 간단한 사용 방법을 제공하기를 희망하며 사용자는 플러그인 내부에서 수행되는 작업에 주의를 기울일 필요가 없습니다. Vue는 new Vue() 이전에 플러그인을 사용하기 위한 사용 방법을 구체적으로 제공합니다.

공식적으로 제공되는 플러그인(예: vue-router, vuex)인지 아니면 타사 플러그인(예: ElementUI, <code> ant) 모두 이 방법을 채택하고 있지만 플러그인 내부의 기능은 다릅니다. 물론 다른 플러그인도 많이 있습니다. 굉장해요- vue 커뮤니티에서 제공하는 대규모 플러그인 및 라이브러리 컬렉션이 있습니다.

다음으로, 이 신비한 use 메소드가 어떻게 구현되는지 살펴보겠습니다. Vue.js 플러그인은 install 메소드를 노출해야 합니다. 이 메소드의 첫 번째 매개변수는 Vue 생성자이고, 두 번째 매개변수는 플러그인 구성을 전달하는 데 사용되는 선택적 옵션 개체입니다.

rrreeerrreee

플러그인 내부는 아마도 다음과 같습니다. 위에 표시된 내용은 사실 위에서 언급한 내용에 지나지 않으며 매우 간단합니다. 다음으로 실제 사례 ElementUI를 살펴보겠습니다.

rrreee 설치 파일을 노출하는 한 플러그인을 직접 구현하는 것이 실제로 매우 쉽다는 것을 찾는 것은 어렵지 않습니다. 메소드를 외부 세계에 전달합니다. Vue.use를 사용할 때 이 메소드가 호출됩니다. 따라서 install 안에 구현할 콘텐츠만 넣으면 됩니다. 이것의 장점은 플러그인이 처음에 호출해야 하는 메소드가 install에 캡슐화되어 더욱 간소화되고 확장성이 향상된다는 것입니다.
여기에서 설치하면 실제로 모든 구성요소가 소개된다는 점을 눈치채셨을 것입니다. 대규모 플러그인 라이브러리이므로 일부 성능 문제가 있을 수 있습니다. ElementUI를 사용해 본 학생들은 이것이 주문형 소개를 지원한다는 것을 알고 있습니다. 실제로 위의 예에서 몇 가지 단서를 찾을 수 있습니다.

rrreee🎜여기서 각 구성 요소는 별도로 내보내지고 각 구성 요소 내부에는 install이 유사하게 노출되어 각 구성 요소를 조립할 수 있으므로 각 구성 요소를 별도로 Vue.use할 수 있습니다. 주문형으로 도입되었습니다. 🎜rrreee🎜위 내용 외에도 주목할 만한 몇 가지 사항이 있습니다: 🎜

• 플러그인이 개체를 전달하면 개체의 install 메서드가 실행됩니다. 함수인 경우 자체적으로 실행하고 bind this를 null로 설정한 다음 추가 매개변수를 전달합니다

rrreee

플러그인이 등록되지 않은 경우 등록 성공 후 installed 속성이 true. <code>Vue.use 메소드는 플러그인의 반복 등록을 피하기 위해 플러그인의 installed 속성을 ​​내부적으로 감지합니다.

🎜Vue.use 사실 신비롭진 않습니다. 내부는 여전히 우리가 흔히 사용하는 것과 똑같지만, 그냥 고급 코팅으로 덮어놓은 것 뿐입니다. 개발 중에도 이 방법을 사용해 볼 수 있는데, 이는 간단할 뿐만 아니라 강력합니다. 🎜🎜🎜관련 권장 사항: 🎜🎜🎜🎜2020 프론트엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문: 🎜프로그래밍 입문🎜! ! 🎜🎜

위 내용은 Vue.use가 무엇인지에 대한 간략한 토론은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!