Vue 명령 실현 원리 분석

11250 단어 Vue지령 원리
기본 사용
홈 페이지 사례:

<div id='app'>
  <input type="text" v-model="inputValue" v-focus>
</div>
<script>
  Vue.directive('focus', {
    //           
    bind () {
      console.log('bind')
    },
    //            DOM   ……
    inserted: function (el) {
      console.log('inserted')
      el.focus()
    },
    //     VNode       
    update () {
      console.log('update')
    },
    //         VNode     VNode        
    componentUpdated () {
      console.log('componentUpdated')
    },
    //      ,          
    unbind () {
      console.log('unbind')
    }
  })
  new Vue({
    data: {
      inputValue: ''
    }
  }).$mount('#app')
</script>
2.지령 작업 원리
2.1 초기 화
전역 API 를 초기 화 할 때 platforms/web 에서 createPatchFunction 을 호출 하여 VNode 를 실제 DOM 으로 변환 하 는 patch 방법 입 니 다.초기 화 에서 중요 한 단 계 는 DOM 노드 에 대응 하 는 hooks 방법 을 정의 하 는 것 입 니 다.DOM 의 생 성(create),활성화(avtivate),더 새로운(update),제거(remove),소각(destroy)과정 에서 각각 해당 하 는 hooks 방법 을 문의 합 니 다.이 hooks 의 일부분 은 명령 성명 주기의 입구 이다.

// src/core/vdom/patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
export function createPatchFunction (backend) {
  let i, j
  const cbs = {}

  const { modules, nodeOps } = backend
  for (i = 0; i < hooks.length; ++i) {
    cbs[hooks[i]] = []
    // modules  vue   ,   class, style, domListener, domProps, attrs, directive, ref, transition
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        //    hooks   {hookEvent: [cb1, cb2 ...], ...}  
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }
  // ....
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // ...
  }
}
2.2 템 플 릿 컴 파일
템 플 릿 컴 파일 은 명령 어 파 라 메 터 를 분석 하 는 것 입 니 다.구체 적 으로 해 체 된 ASTelement 는 다음 과 같 습 니 다.

{
  tag: 'input',
  parent: ASTElement,
  directives: [
    {
      arg: null, //   
      end: 56, //         
      isDynamicArg: false, //     ,v-xxx[dynamicParams]='xxx'    
      modifiers: undefined, //      
      name: "model",
      rawName: "v-model", //     
      start: 36, //         
      value: "inputValue" //   
    },
    {
      arg: null,
      end: 67,
      isDynamicArg: false,
      modifiers: undefined,
      name: "focus",
      rawName: "v-focus",
      start: 57,
      value: ""
    }
  ],
  // ...
}
2.3 렌 더 링 생 성 방법
vue 는 명령 의 방식 으로 DOM 을 조작 하 는 것 을 추천 합 니 다.사용자 정의 명령 은 DOM 이나 속성 을 수정 할 수 있 기 때문에 명령 이 템 플 릿 분석 에 미 치 는 영향 을 피 할 수 있 습 니 다.렌 더 링 방법 을 생 성 할 때 먼저 명령 을 처리 합 니 다.예 를 들 어 v-model 은 본질 적 으로 문법 설탕 입 니 다.렌 더 링 함 수 를 연결 할 때 요소 에 value 속성 과 input 사건(input 를 예 로 들 어,이것 도 사용자 정의 가 가능 합 니 다.

with (this) {
    return _c('div', {
        attrs: {
            "id": "app"
        }
    }, [_c('input', {
        directives: [{
            name: "model",
            rawName: "v-model",
            value: (inputValue),
            expression: "inputValue"
        }, {
            name: "focus",
            rawName: "v-focus"
        }],
        attrs: {
            "type": "text"
        },
        domProps: {
            "value": (inputValue) //   v-model        
        },
        on: {
            "input": function($event) { //   v-model           
                if ($event.target.composing)
                    return;
                inputValue = $event.target.value
            }
        }
    })])
}
2.4,VNode 생 성
vue 의 명령 설 계 는 우리 가 DOM 을 조작 하 는 것 을 편리 하 게 하 는 것 으로 VNode 를 생 성 할 때 명령 은 추가 로 처리 하지 않 았 다.
2.5、실제 DOM 생 성
vue 초기 화 과정 에서 우 리 는 두 가 지 를 기억 해 야 한다.
  • 상태의 초기 화 는 아버지->아들 입 니 다.예 를 들 어 beforeCreate,created,beforeMount,호출 순 서 는 아버지->아들 입 니 다
  • 실제 DOM 마 운 트 순 서 는 하위->부모 입 니 다.예 를 들 어 mounted 입 니 다.이것 은 실제 DOM 을 생 성 하 는 과정 에서 구성 요 소 를 만 나 면 구성 요 소 를 만 드 는 과정 을 걷 기 때 문 입 니 다.실제 DOM 의 생 성 은 하위 에서 부모 1 급 으로 연결 되 기 때 문 입 니 다
  • patch 과정 에서 createElm 을 호출 하여 실제 DOM 을 생 성 할 때마다 현재 VNode 에 data 속성 이 존재 하 는 지,존재 하 는 지 확인 합 니 다.invokeCreate Hooks 를 호출 합 니 다.처음 만 든 갈고리 함수 입 니 다.핵심 코드 는 다음 과 같 습 니 다.
    
    // src/core/vdom/patch.js
    function createElm (
        vnode,
        insertedVnodeQueue,
        parentElm,
        refElm,
        nested,
        ownerArray,
        index
      ) {
        // ...
        // createComponent    ,        ,     ,         
        if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
          return
        }
    
        const data = vnode.data
        // ....
        if (isDef(data)) {
            //         ,      ,    
            //        bind  ,          hooks  
            invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        //     ,    
        insert(parentElm, vnode.elm, refElm)
        // ...
      }
    이상 은 명령 갈고리 방법의 첫 번 째 입구 입 니 다directive.js신비 한 베일 을 폭로 할 때 가 되 었 습 니 다.핵심 코드 는 다음 과 같 습 니 다.
    
    // src/core/vdom/modules/directives.js
    
    //        updateDirectives  
    export default {
      create: updateDirectives,
      update: updateDirectives,
      destroy: function unbindDirectives (vnode: VNodeWithData) {
        //    ,vnode === emptyNode
        updateDirectives(vnode, emptyNode)
      }
    }
    
    function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
      if (oldVnode.data.directives || vnode.data.directives) {
        _update(oldVnode, vnode)
      }
    }
    
    function _update (oldVnode, vnode) {
      const isCreate = oldVnode === emptyNode
      const isDestroy = vnode === emptyNode
      const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
      const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
      //       
      const dirsWithInsert = [
      //        
      const dirsWithPostpatch = []
    
      let key, oldDir, dir
      for (key in newDirs) {
        oldDir = oldDirs[key]
        dir = newDirs[key]
        //      ,     inserted    
        if (!oldDir) {
          // new directive, bind
          callHook(dir, 'bind', vnode, oldVnode)
          if (dir.def && dir.def.inserted) {
            dirsWithInsert.push(dir)
          }
        } else {
          // existing directive, update
          //       ,     componentUpdated    
          dir.oldValue = oldDir.value
          dir.oldArg = oldDir.arg
          callHook(dir, 'update', vnode, oldVnode)
          if (dir.def && dir.def.componentUpdated) {
            dirsWithPostpatch.push(dir)
          }
        }
      }
    
      if (dirsWithInsert.length) {
        //   DOM      ,        
        const callInsert = () => {
          for (let i = 0; i < dirsWithInsert.length; i++) {
            callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
          }
        }
        // VNode  insert hooks
        if (isCreate) {
          mergeVNodeHook(vnode, 'insert', callInsert)
        } else {
          callInsert()
        }
      }
    
      if (dirsWithPostpatch.length) {
        mergeVNodeHook(vnode, 'postpatch', () => {
          for (let i = 0; i < dirsWithPostpatch.length; i++) {
            callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
          }
        })
      }
    
      if (!isCreate) {
        for (key in oldDirs) {
          if (!newDirs[key]) {
            // no longer present, unbind
            callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
          }
        }
      }
    }
    첫 번 째 생 성에 대해 실행 과정 은 다음 과 같 습 니 다.
    1.oldVnode==empty Node,isCreate 는 true 로 현재 요소 의 모든 bind 갈고리 방법 을 호출 합 니 다.
    2.inserted 갈고리 가 있 는 지 확인 하고 존재 하면 insert 갈 고 리 를 VNode.data.hooks 속성 에 통합 합 니 다.
    3.DOM 마 운 트 가 끝 난 후 invokeInsertHook 을 실행 합 니 다.마 운 트 된 노드 는 VNode.data.hooks 에 insert 갈고리 가 존재 하면 실 행 됩 니 다.명령 바 인 딩 을 실행 하 는 inserted 방법 을 호출 합 니 다.
    일반적으로 처음 만 드 는 것 은 bid 와 inserted 방법 만 가 고 update 와 componentUpdated 는 bid 와 inserted 와 대응 합 니 다.구성 요소 의존 상태 가 바 뀌 었 을 때 VNode diff 알고리즘 을 사용 하여 노드 를 패 치 식 으로 업데이트 합 니 다.호출 프로 세 스:
    1.응답 식 데이터 가 바 뀌 었 습 니 다.dep.notify 를 호출 하여 데이터 업 데 이 트 를 알 립 니 다.
    2.patchVNode 를 호출 하여 신 구 VNode 를 차별 화 업데이트 하고 현재 VNode 속성 을 전량 업데이트 합 니 다(명령 을 포함 하여 updateDirectives 방법 에 들 어 갑 니 다).
    3.만약 명령 에 update 갈고리 방법 이 존재 한다 면 update 갈고리 방법 을 호출 하고 componentUpdated 리 셋 을 초기 화하 여 postpatch hooks 를 VNode.data.hooks 에 마 운 트 합 니 다.
    4.현재 노드 및 하위 노드 업데이트 가 완료 되면 potpatch hooks,즉 명령 의 componentUpdated 방법 이 실 행 됩 니 다.
    핵심 코드 는 다음 과 같 습 니 다.
    
    // src/core/vdom/patch.js
    function patchVnode (
        oldVnode,
        vnode,
        insertedVnodeQueue,
        ownerArray,
        index,
        removeOnly
      ) {
        // ...
        const oldCh = oldVnode.children
        const ch = vnode.children
        //          
        if (isDef(data) && isPatchable(vnode)) {
          for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
          if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
        }
        // ...
        if (isDef(data)) {
        //   postpatch  
          if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
        }
      }
    unbid 방법 은 노드 를 소각 할 때 invoke Destroy Hook 을 호출 하 는 것 입 니 다.여 기 는 많은 설명 을 하지 않 습 니 다.
    주의사항
    사용자 정의 명령 을 사용 할 때 일반 템 플 릿 데이터 와 연결 되 어 있 습 니 다.v-model 은 일정한 차이 가 있 습 니 다.예 를 들 어 제 가 전달 하 는 매개 변수(v-xxx='param')는 인용 형식 이지 만 데이터 가 변 할 때 명령 을 실행 할 수 없 는 bid 나 inserted 입 니 다.이것 은 명령 의 성명 주기 에 bid 와 inserted 는 초기 화 할 때 한 번 만 호출 되 기 때 문 입 니 다.뒤에 update 와 componentUpdated 만 갑 니 다.
    명령 의 성명 주기 실행 순 서 는 bid->inserted->update->componentUpdated 입 니 다.명령 이 하위 구성 요소 의 내용 에 의존 해 야 할 경우 componentUpdated 에 해당 하 는 업무 논 리 를 쓰 는 것 을 추천 합 니 다.
    vue 에서 많은 방법 이 순환 호출 입 니 다.예 를 들 어 hooks 방법,이벤트 리 셋 등 은 보통 try catch 로 감 싸 줍 니 다.이렇게 하 는 목적 은 처리 방법 이 잘못 보고 되 고 전체 프로그램 이 무 너 지 는 것 을 방지 하기 위해 서 입 니 다.이 점 은 우리 가 개발 하 는 과정 에서 참고 하여 사용 할 수 있 습 니 다.
    소결
    전체 vue 소스 코드 를 보기 시 작 했 을 때 많은 지엽 적 인 방법 에 대해 잘 모 르 고 구체 적 인 모든 기능 의 실현 을 정리 할 때 전체 vue 의 전 모 를 볼 수 있 으 며 개발 사용 중의 일부 구덩이 도 피 할 수 있다.
    이상 은 Vue 명령 의 실현 원 리 를 분석 하 는 상세 한 내용 입 니 다.Vue 명령 원리 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!

    좋은 웹페이지 즐겨찾기