Vue.use의 소스 코드 분석

Vue 개발 경험이 있는 사람들은 vue.use가 낯설지 않습니다. vue-resource 또는 vue-router와 같은 전역 구성 요소를 사용하는 경우 Vue.use 메서드를 통해 도입해야 작동합니다. 그렇다면 구성 요소가 도입되기 전에 vue.use는 정확히 무엇을 수행합니까?

먼저 vue.use 소스 코드로 이동

Vue.use = function (plugin) {
    /* istanbul ignore if */
    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 if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    plugin.installed = true;
    return this
  };

Vue.use를 통해 플러그인 플러그인을 도입한다고 가정해 보겠습니다(플러그인은 일시적으로 변수나 매개변수로 이해될 수 있음). 즉, Vue.use(plugin );

먼저 들어오는 매개변수를 확인합니다. 플러그인에 설치된 속성이 존재하고 논리값이 true이면 바로 반환되고 후속 코드는 실행되지 않습니다. 이 판단의 역할은 무엇입니까? ? 나중에 그것에 대해 이야기하겠습니다.

먼저 설치된 플러그인 속성이 존재하지 않거나 false라고 가정하고 계속 실행합니다.

var args = toArray(arguments, 1)

toArray 메소드가 실행됩니다. toArray는 Vue.use 메소드에 의해 전달된 매개변수 세트를 받습니다. 예를 들어 Vue.use(a,b,c)의 경우 인수는 [a,b,c]와 유사합니다. (참고: 인수는 실제 배열이 아닌 배열과 유사합니다.)

여기서는 하나의 매개변수 플러그인만 도입하기 때문에 이므로 인수는 [plugin]과 유사합니다.

toArray의 기능은 무엇인가요? 소스코드를 보세요.

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

toArray(arguments,1)를 실행하면 길이 = 인수.길이-1인 새 배열 ret가 생성되고, 그런 다음 ret에 인수 요소를 역순으로 할당하기 위해 while 루프가 수행됩니다.

따라서 인수에서 첫 번째 요소를 제외한 나머지 요소를 ret에 할당하는 것과 궁극적으로 동일합니다. toArray의 주요 기능은 클래스 배열을 실제 배열로 변환하여 배열 메서드를 호출할 수 있도록 하는 것입니다.

여기서는 플러그인 매개변수인 인수=[플러그인] 하나만 도입했기 때문에 toArray는 빈 배열 []을 반환합니다.

그런 다음 [].unshift(Vue)와 동일한 args.unshift(this)를 실행합니다. 즉, args = [Vue];

그런 다음

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

를 실행합니다. 여기서 의 설치 여부를 판단합니다. 플러그인이 함수인 경우, install 메소드에 의해 전달된 매개변수는 args의 배열 요소입니다. 즉, 설치에서 허용되는 첫 번째 매개변수는 Vue입니다.

플러그인의 설치 가 함수가 아닌 경우 플러그인 자체가 함수인지 확인합니다. 가 함수이면 플러그인 함수가 실행되고 매개변수는 args의 배열 요소입니다.

마지막으로plugin.installed를 true로 설정합니다. Plugin.installed를 true로 설정하는 목적은 동일한 플러그인이 여러 번 설치되는 것을 방지하기 위한 것입니다. 예를 들어 Vue.use(플러그인)가 한 번 실행된 후 다시 실행되면 installed가 반환됩니다. 첫 번째 판단 단계로 넘어갑니다.

요약하자면 Vue.use의 기능은 실제로 플러그인 기능을 실행하거나 플러그인의 설치 메소드를 실행하여 플러그인을 등록하고 Vue 객체를 플러그인 또는 설치 메소드의 첫 번째 매개변수로 전달하는 것입니다. 플러그인 또는 설치를 위한 기타 매개변수로 사용되는 기타 매개변수입니다.

간단한 예를 들어보세요

import Vue from 'vue'
function test(a){
   console.log(a);//Vue
}
function test1(a,b){
　　console.log(a,b);//Vue hello
}
let oTest = {
   install：function(a,b){
      console.log(a,b);//Vue hello1
   }
}
Vue.use(test);
Vue.use(test1,'hello');
Vue.use(oTest,'hello1')
console.log(oTest);
//{
　　install:function(){...},
　　installed:true
}

관련 추천:

2020년 프론트엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Vue.use의 소스 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!