미단 면접관: Vue에 대해 알아봤어요.use는 어떻게 이루어졌나요

이api는 뭐 하는 거예요?
원본 코드를 보기 전에 먼저 공식 문서의 설명을 보면 이해하기 쉽다.Vue 공식 문서의 설명에 따르면 이api는 Vue를 설치하는 데 사용됩니다.js 플러그인.플러그인이 대상이라면 설치 방법을 제공해야 합니다.플러그인이 함수라면 설치 방법으로 사용됩니다.install 메서드가 호출되면 Vue가 매개 변수로 전달됩니다.

Vue.use(plugin); //      Object | Function

이 밖에 문서에 언급된 것은 다음과 같다.

이 방법은 new Vue()가 호출되기 전에 호출되어야 합니다.

설치 방법이 같은 플러그인에 여러 번 호출되면 플러그인은 한 번만 설치됩니다.

원본 코드 분석Vue.use의 소스는 20행도 안 됩니다. 이 디렉토리 아래:
node_modules\vue\src\core\global-api\use.js
소스의 내용은 다음과 같습니다.

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

원본 코드를 보면 Vue.use가 수신한 plugin 유형은 Function | Object인데 이것은 문서의 설명과 일치한다.
이어 아래 코드에서 this._installedPlugins는 설치된 플러그인을 기록하고 전송된 plugin가 설치되었는지 판단하는 데 사용되며, 설치되면 설치되지 않는다는 것도 문서에 언급되어 있다.참고로 플러그인이 설치되었는지 판단하기 위해 이쪽은 indexOf 방법을 사용했는데 사실은 아래로 호환되고 있습니다includes는 ES2016 문법이기 때문입니다.

const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
    return this
}

다음은 이 코드입니다.

const args = toArray(arguments, 1)

toArray 방법이 사용되었는데,
node_modules\vue\src\shared\util.js:218 toArray 함수의 역할은 클래스 그룹의 대상을 수조(여기서arguments 대상)로 바꾸고 두 번째 매개 변수는 시작 하표를 나타낸다. 여기서 1은 수조를 무시하는 첫 번째 요소(즉 plugin를 전달한다. 상기 코드에서 우리는 추측할 수 있다. Vue.use는 대략 이렇게 사용된다.

Vue.use(plugin, arg1, arg2...)

다음 코드는 Vue (여기 this 지향 Vue) 을 그룹의 맨 앞에 추가합니다.

args.unshift(this)

마지막으로 얻은 args는 다음과 유사할 것이다.

[Vue, arg1, arg2...]

그 다음은 플러그인을 설치하는 것이다.plugin 자체가 대상이라면 install 방법을 제공하면 이install 방법을 직접 사용해서 args로 전송args한다.Vue 앞에 Vue를 추가했기 때문에 install는 첫 번째 매개 변수로 전송됩니다. 이것은 문서에서 설명한 Vue 방법과 일치합니다.plugin 자체가 함수라면 이 함수로 플러그인을 설치합니다.

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

다시 말하면 설치된 플러그인을 기록해서 중복 설치를 방지합니다.

installedPlugins.push(plugin)

마지막 단계는 체인 호출을 위해 Vue로 돌아갑니다.

return this

참고 자료
Vue.use(plugin) - Vue 공식 문서

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

미단 면접관: Vue에 대해 알아봤어요.use는 어떻게 이루어졌나요

좋은 웹페이지 즐겨찾기