Vue 원본 수첩 (1)

(이 글은 src/core/instance 아래의 파일의 코드 기능에 대해 주석을 하여 원본 코드를 보는 과정에서 신속하게 이해할 수 있도록 한다)
입구 파일 src/core/instance/index.js에서 볼 수 있어요.

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

Vue의 구조 함수는 여기에서 mixin 방식으로

데이터 방법 등 특성 처리(state)

이벤트 처리(events)

라이프 사이클(lifecycle)

렌더링 함수(render)

의 관련 방법을 Vue의 원형에 걸다.

1.init

걸었어init 방법, 맞아요. 구조 함수에서 호출된init 방법.
여기에 몇 가지 파라미터 처리를 했는데 그 중에서 저자는 파라미터 대상이 값을 부여할 때 하나하나의 값을 열거한 값 대신 주어서 성능을 향상시켰다.설명://doing this because it's faster than dynamic enumeration.
그 다음에 각 init 함수와 트리거 갈고리를 포함하여 순서대로 다음과 같은 방법을 집행한다

 /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initState(vm)
    callHook(vm, 'created')
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }

2.state

initState는 모두 다음과 같은 조작을 했다

 vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch) initWatch(vm, opts.watch)

initProps는 initData와 유사하게 처리됩니다.
initProps는 유형 검사를 했고 defineReactive는 응답식 처리입니다.
initData에서 함수 처리(data는 대상 또는 함수)를 한 다음 키가 props와 중복되는지 확인하고 키가 $또는 인지 확인합니다처음에 이것은 vue 내부에서 사용합니다. 만약 당신의 키가 이것으로 시작한다면 당신의 키를 얻을 수 없을 것입니다. (이것은 설명을 보지 못한 것 같습니다. 힌트를 줄 수 있을 것 같습니다.)
그리고proxy를 만들어서 사용자 매개 변수props와 데이터를 각각 로 에이전트합니다props 및데이터 이 두 내부 속성, 사용자 접근이 사실 접근했어props 및데이터
initMethods 이것은 methods 내부의 함수를 실례에 bind하고 실례에 연결하는 것입니다
initWatch는 훑어보고 $watch 방법을 실행해서 처리합니다
initComputed는 Watcher 인스턴스를 작성한 다음 에 배치합니다.computedWatchers
(응답식 관련 추가 확장)
stateMixin 혼합 방법은 $data, $props, $set, $delete 등 데이터 조작을 가리키게 합니다데이터 및props, 그리고 $watch 방법을 끊었습니다.

3.events

$on, $once, $off, $emit 네 가지 방법 마운트
이벤트 핸들이 에 저장됨이벤트 이 속성에서 $on 방법에서 처리를 하여 이 실례가 생명주기의 훅을 사용했는지 판단합니다.has Hook Event 이 값은false입니다. 그리고lifecycle의call Hook 방법에서 $emit 생명주기 hook을 사용하지 않는 성능 최적화입니다.

4.lifecycle

원형에 걸기mount 방법, 이것은 비교적 중요합니다. $mount는 방법을 사용합니다. ($mount는 위의 init 함수에서 호출됩니다.) 이 방법이 실행될 때render 함수에 필요합니다.오류가 발생하지 않습니다. (이점에 관해서 vue는template나el의 html 모델을 최종적으로render 함수로 바꿉니다. 일반적으로 vue-loader로 개발하면template의 내용을render 함수로 바꿉니다. 그래서 마지막에 포장한 것은template로 전환하는 기능 코드를 포함하지 않습니다.) vnode 함수를 되돌려주는 것은 vnode입니다. 아래에mount 부분 코드:

 callHook(vm, 'beforeMount')
    vm._watcher = new Watcher(vm, function updateComponent () {
      vm._update(vm._render(), hydrating)
    }, noop)
    hydrating = false
    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
    if (vm.$vnode == null) {
      vm._isMounted = true
      callHook(vm, 'mounted')
    }

여기 라이프 사이클 2개 보여요.
_업데이트 방법은dom 업데이트를 시작합니다. 보세요업데이트 방법
처음에is Mounted는 Before Update 갈고리를 촉발할지 여부를 판단합니다.dom를 처음 삽입하는 것도 이 방법을 사용하지만 Before Update를 촉발해서는 안 됩니다.
패치 방법을 사용해서 diff를 하고dom를 업데이트했습니다.(vnode 나중에 다시 보기)
또한 $forceUpdate와 $destroy 두 가지 방법을 마운트했습니다

5.render

$nextTick 메서드를 먼저 마운트했습니다.
그리고renderMixin 함수에서 원형으로 마운트했습니다렌더 방법(instancei 아래에 렌더-helpers 폴더에 렌더와 관련된 도구 함수를 호출할 수 있음) 이 방법은 슬로트와 관련된 조작을 한 다음에 렌더 함수를 호출하여 vnode(render와 관련된 구체적인 전개가 필요함)를 가져옵니다.
여기에renderProxy, 비생산 환경에서proxy를 만들었습니다.proxy를 보십시오.js, 실례 속성에 접근할 때, 존재하지 않는 속성에 접근할 때 알림을 주는 것입니다.
이상.