Vue 소스 분석 (1) - 소스 구성 구조 분석

이 시리즈 분석의 Vue.js 버전은: v2.2.6, vue-dev 창고에 있는dist/vue입니다.js에서 원본 코드를 찾았습니다.

1. 전체 구조

(function (global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

typeof define === 'function' && define.amd ? define(factory) :

(global.Vue = factory());

}(this, (function () {  })));

브라우저에서

// factory , 

window.Vue=factory()

익명 함수는 최종적으로 Vue$3 구조 함수를 되돌려주기 때문에 위 코드가 실제로 실행됩니다

window.Vue=Vue$3;

이 익명 함수, 즉factory가 실행하는 동안 어떤 일을 했는지 보십시오. (명시되지 않은 줄 수는 대부분 도구류 함수 정의입니다. 여기서 생략하고 호출된 후에 보십시오.)

261행config 대상

451행은 nextTick 함수를 실현한다

616-660 Dep 클래스 구현

721-948 Observer 클래스 구현

1463-1533 initProxy 클래스 구현

1560-1737 구현 VNode 클래스, 가상 DOM 관련

2461-2607 Watcher 클래스 구현

3841은 Vue$3 클래스를 실현합니다

3848-3852는 각각 다음과 같은 함수를 호출합니다. 역할은 Vue$3의 원형에 일련의 방법과 속성을 추가하는 것입니다

initMixin(Vue$3);

stateMixin(Vue$3);

eventsMixin(Vue$3);

lifecycleMixin(Vue$3);

renderMixin(Vue$3);

4166은 initGlobal API(Vue$3)를 호출하는데 Vue$3에 정적 방법과 속성을 추가하는 역할을 한다

7236-7237은 다음과 같은 함수를 호출하는데 플랫폼 특유의 지령과 구성 요소를 추가하는 역할을 한다

extend(Vue$3.options.directives, platformDirectives);

extend(Vue$3.options.components, platformComponents);

다음은 이 함수들이 실행하는 동안 Vue$3에 대해 어떤 일을 했는지 봅시다(이하 Vue$3은 매개 변수로 Vue에 전달되기 때문에 같은 인용입니다)

2、initMixin(Vue$3)

Vue.prototype._init = function (options?: Object) {}

3、stateMixin(Vue$3)

Vue.prototype.$data

Vue.prototype.$set = set

Vue.prototype.$delete = del

Vue.prototype.$watch = function(){}

4、eventsMixin(Vue$3)

Vue.prototype.$on = function (event: string, fn: Function): Component {}

Vue.prototype.$once = function (event: string, fn: Function): Component {}

Vue.prototype.$off = function (event?: string, fn?: Function): Component {}

Vue.prototype.$emit = function (event: string): Component {}

5、lifecycleMixin(Vue$3)

Vue.prototype._mount = function(){}

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}

Vue.prototype._updateFromParent = function(){}

Vue.prototype.$forceUpdate = function () {}

Vue.prototype.$destroy = function () {}

6、renderMixin(Vue$3)

Vue.prototype.$nextTick = function (fn: Function) {}

Vue.prototype._render = function (): VNode {}

Vue.prototype._s = _toString

Vue.prototype._v = createTextVNode

Vue.prototype._n = toNumber

Vue.prototype._e = createEmptyVNode

Vue.prototype._q = looseEqual

Vue.prototype._i = looseIndexOf

Vue.prototype._m = function(){}

Vue.prototype._o = function(){}

Vue.prototype._f = function resolveFilter (id) {}

Vue.prototype._l = function(){}

Vue.prototype._t = function(){}

Vue.prototype._b = function(){}

Vue.prototype._k = function(){}

7、initGlobalAPI(Vue$3)

Vue.config

Vue.util = util

Vue.set = set

Vue.delete = del

Vue.nextTick = util.nextTick

Vue.options = {

components: {

KeepAlive

},

directives: {},

filters: {},

_base: Vue

}

Vue.use

Vue.mixin

Vue.cid = 0

Vue.extend

Vue.component = function(){}

Vue.directive = function(){}

Vue.filter = function(){}

Vue.prototype.$isServer

Vue.version = '__VERSION__'

8、extend()

Vue.options = {

components: {

KeepAlive,

Transition,

TransitionGroup

},

directives: {

model,

show

},

filters: {},

_base: Vue

}

9. 이 절의 수확:

Vue 자체 지령은 단 2개: v-show, v-model;다른 v-if는 프로그램 컴파일에 속할 때 발생합니다

Vue 자체 구성 요소는 3개뿐이다:keep-alive,transition,transition-group;Vue를 통해 가능합니다.component 동적 추가;

Vue의 초기화 과정은 본질적으로 Vue 클래스를 보완하고 풍부하게 하는 과정이다. 즉, Vue와 그 원형에 속성과 방법(API)을 추가하는 것이다

마지막: 구축된 원본 코드를 좋아하지 않고 구축 전의 코드를 보는 사람들이 있을 수 있습니다. 여기서 vue-dev 구축 과정과 전체 구조 분석에 대해 비교적 잘 쓴 글을 추천합니다. 본고는 일부 참고가 있습니다. 주소는 여기에 있습니다.
vue2 원본 구축 과정 분석