집 >웹 프론트엔드 >JS 튜토리얼 >DOM을 운영하기 위한 vue 명령어와 $nextTick의 차이점은 무엇인가요?

DOM을 운영하기 위한 vue 명령어와 $nextTick의 차이점은 무엇인가요?

不言원래의: 2018-08-02 17:46:352270검색

이 글에서는 DOM을 운영하기 위한 vue 지침과 $nextTick의 차이점이 무엇인지 소개합니다. 참고할 만한 가치가 있고 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

비동기 업데이트 대기열

아직 눈치 채지 못했을 수도 있지만 Vue는 DOM 업데이트를 비동기적으로 수행합니다. 데이터 변경이 관찰될 때마다 Vue는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 이러한 중복 제거는 불필요한 계산 및 DOM 작업을 방지하는 데 중요합니다. 그런 다음 다음 이벤트 루프 "틱"에서 Vue는 큐를 플러시하고 실제(중복 제거된) 작업을 수행합니다. Vue는 내부적으로 비동기 대기열에 기본 Promise.then 및 MessageChannel을 사용하려고 시도합니다. 실행 환경이 이를 지원하지 않으면 대신 setTimeout(fn, 0)이 사용됩니다.

예를 들어 vm.someData = 'new value' 로 설정하면 구성 요소가 즉시 다시 렌더링되지 않습니다. 큐가 플러시되면 이벤트 루프 큐가 지워지는 다음 "틱"에서 구성 요소가 업데이트됩니다. 대부분의 경우 이 프로세스에 대해 걱정할 필요가 없지만 DOM 상태가 업데이트된 후에 뭔가를 하려는 경우 약간 까다로울 수 있습니다. Vue.js는 일반적으로 개발자가 "데이터 기반" 방식으로 생각하고 DOM을 직접 건드리지 않도록 권장하지만 실제로 그렇게 해야 할 때가 있습니다. 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 직후 Vue.nextTick(콜백)을 사용할 수 있습니다. 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다. 예:

<p id="example">{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

글로벌 Vue가 필요하지 않기 때문에 구성 요소 내에서 vm.$nextTick() 인스턴스 메서드를 사용하는 것이 특히 편리하며 콜백 함수의 이 메서드는 현재 Vue 인스턴스에 자동으로 바인딩됩니다.

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

vue 명령어

Hook 기능

A 명령어 정의 개체는 다음과 같은 후크 기능을 제공할 수 있습니다(모두 선택 사항).

bind: 한 번만 호출되고 명령어가 첫 번째 요소에 바인딩될 때 호출됩니다. 시간. 여기에서 일회성 초기화 설정을 수행할 수 있습니다.

inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드만 존재하도록 보장되지만 반드시 문서에 삽입될 필요는 없습니다).

update: 구성 요소의 VNode가 업데이트될 때 호출되지만 해당 하위 VNode가 업데이트되기 전에 발생할 수도 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

comComponentUpdated: 명령어가 있는 구성 요소의 VNode와 해당 하위 VNode가 모두 업데이트된 후에 호출됩니다.

unbind: 명령이 요소에서 바인딩 해제될 때 한 번만 호출됩니다.

Hook 기능 매개변수(예: el, 바인딩, vnode 및 oldVnode).

업데이트할 때 DOM이 아직 문서를 삽입하지 않았을 수 있지만, componentUpdated는 DOM이 이미 문서를 삽입했음을 의미합니다. 더욱이 소위 "업데이트" 후크 기능의 트리거 조건은 매우 광범위하고 제어하기 어렵습니다. 예를 들어, 노드와 관련되지 않은 다른 인접 노드를 업데이트하면 해당 레이아웃이 리플로우되고 이로 인해 후크 기능도 트리거됩니다. 따라서 데이터가 업데이트된 후 DOM을 작동하려면 다음이 필요합니다. update 및 componentUpdated 지침을 사용할 때 주의해야 할 점은 nextTick

DOM을 운영하기 위한 vue 명령어와 $nextTick의 차이점은 무엇인가요?

관련 기사