VOE 비동기 업데이트 DOM-$nextTick 으로 DOM 보기 문 제 를 해결 합 니 다.

VUE 비동기 업데이트 DOM
우선,Vue 는 DOM 을 업데이트 할 때 비동기 로 실 행 됩 니 다!
따라서 데이터 변 화 를 감지 하면 Vue 는 같은 이벤트 순환 에서 발생 하 는 모든 데이터 변경 을 버퍼 링 합 니 다.같은 watcher 가 여러 번 트리거 되면 대기 열 에 한 번 만 추 가 됩 니 다.버퍼 링 을 할 때 중복 데 이 터 를 제거 하 는 것 은 불필요 한 계산 과 DOM 작업 을 피 하 는 데 매우 중요 하 다.그리고 다음 이벤트 순환"tick"에서 Vue 가 대기 열 을 새로 고치 고 실제(무 거 운 것)작업 을 수행 합 니 다.Vue 는 내부 에서 비동기 대기 열 에 원생 Promise.then,MutationObserver,setImmediate 를 사용 하려 고 시도 하 며,실행 환경 이 지원 되 지 않 으 면 setTimeout(fn,0)으로 대체 합 니 다.
예 를 들 어 vm.somedata='new value'를 설정 하면 이 구성 요 소 는 바로 렌 더 링 되 지 않 습 니 다.대기 열 을 새로 고 칠 때 구성 요 소 는 다음 이벤트 순환'tick'에서 업 데 이 트 됩 니 다.대부분의 경우 우 리 는 이 과정 에 관심 을 가 질 필요 가 없 지만,업 데 이 트 된 DOM 상 태 를 바탕 으로 뭔 가 를 하고 싶다 면 좀 까다 로 울 수 있 습 니 다.Vue.js 는 개발 자 들 이'데이터 구동'방식 으로 생각 하고 DOM 에 직접 접촉 하지 않도록 격려 하지만 가끔 우 리 는 이렇게 해 야 한다.
해결 방법
데이터 가 변 한 후 Vue 가 DOM 업 데 이 트 를 완료 할 때 까지 기다 리 기 위해 서 는 데이터 가 변 한 후 바로 Vue.nextTick(callback)을 사용 할 수 있 습 니 다.이렇게 리 셋 함 수 는 DOM 업데이트 가 끝 난 후에 호출 될 것 이다.
예 를 들 면:

<div id="example">{{message}}</div>

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
})

구성 요소 에서 vm.$nextTick()인 스 턴 스 방법 을 사용 하 는 것 이 매우 편리 합 니 다.전역 Vue 가 필요 하지 않 고 리 셋 함수 의 this 는 현재 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) // => '   '
   })
  }
 }
})

$nextTick()이 Promise 대상 을 되 돌려 주기 때문에 새로운 ES 2017 async/await 문법 으로 같은 일 을 완성 할 수 있 습 니 다.

methods: {
 updateMessage: async function () {
  this.message = '   '
  console.log(this.$el.textContent) // => '   '
  await this.$nextTick()
  console.log(this.$el.textContent) // => '   '
 }
}

추가 지식:Vue 데이터 업데이트 보기 가 업데이트 되 지 않 습 니 다.알 아야 할 몇 가지 해결 방안
지식 확장
하나의 구성 요소 인 스 턴 스 에서 data 에서 초기 화 된 데이터 만 응답 합 니 다.Vue 는 대상 속성의 추가 나 삭 제 를 감지 할 수 없습니다.data 에서 설명 하지 않 은 속성 은 응답 이 아 닙 니 다.
Vue 는 생 성 된 인 스 턴 스 에 루트 응답 식 속성 을 동적 으로 추가 할 수 없 지만$set 방법 으로 포 함 된 대상 에 해당 속성 을 추가 할 수 있 습 니 다.
배열 데이터 변동,일부 방법 으로 배열 을 조작 하고 데 이 터 를 변동 할 때 일부 방법 은 vue 에 의 해 감 측 될 수 없습니다.
push(),pop(),shift(),unshift(),splice(),sort(),reverse()는 vue 에서 감지 할 수 있 습 니 다.
filter(), concat(), slice()。원본 배열 은 바 뀌 지 않 지만 항상 새 배열 로 돌아 갑 니 다.비 변이 방법 을 사용 할 때,새 배열 로 낡은 배열 을 교체 할 수 있다.
vue 는 다음 과 같은 변 경 된 배열 을 감지 할 수 없습니다.
1.색인 을 이용 하여 항목 을 직접 설정 할 때 vm.items[indexOfItem]=newValue
2.배열 의 길 이 를 수정 할 때,예 를 들 어 vm.items.length=newLength
대상 속성 추가 또는 삭제
Vue 는 인 스 턴 스 를 초기 화 할 때 속성 에 대해 getter/setter 전환 과정 을 실행 하기 때문에 속성 은 data 대상 에 존재 해 야 Vue 를 변환 할 수 있 습 니 다.그래 야 응답 할 수 있 습 니 다.
해결 방법:
Vue.set(object,key,value)방법 을 사용 하여 응답 속성 을 끼 워 넣 은 대상 에 추가 합 니 다.
Vue.set(vm.someObject,'b',2)또는 this.$set(this.someObject,'b',2)(이것 도 전역 Vue.set 방법의 별명)
비동기 업데이트 대기 열
최신 프로젝트 에서 이런 상황 을 만 났 습 니 다.데 이 터 는 처음으로 얻 었 고 렌 더 링 도 했 습 니 다.그러나 두 번 째 이후 데 이 터 는 페이지 를 다시 렌 더 링 할 때 만 업데이트 되 고 실시 간 으로 업데이트 되 지 않 습 니 다.
인터넷 에서 자 료 를 찾 아 보 니 Vue 가 DOM 업 데 이 트 를 비동기 적 으로 수행 한 다 는 것 을 알 수 있 었 다.데이터 변 화 를 관찰 하면 Vue 는 하나의 대기 열 을 열 고 같은 이벤트 순환 에서 발생 하 는 모든 데이터 변 화 를 버퍼 링 합 니 다.같은 watcher 가 여러 번 트리거 되면 대기 열 에 한 번 만 추 가 됩 니 다.
해결 방법:
데이터 가 변 한 후 바로 Vue.nextTick(callback)을 사용 할 수 있 습 니 다.이렇게 리 셋 함 수 는 DOM 업데이트 가 완료 되면 호출 됩 니 다.예 를 들 면:

$nextTick()이 Promise 대상 을 되 돌려 주기 때문에 새로운 ES 2016 async/await 문법 으로 같은 일 을 완성 할 수 있 습 니 다.

Object.assign 방법
object.assign 방법 은 모든 속성 값 을 하나 이상 의 소스 대상 에서 대상 으로 복사 하고 대상 을 되 돌려 주 는 데 사 용 됩 니 다.
vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })
주:object 는 이미 성명 한 대상 이 어야 합 니 다.
vue 다 중 순환,동적 데이터 변경 후 렌 더 링 이 느 리 거나 렌 더 링 이 되 지 않 습 니 다.
동적 으로 데 이 터 를 바 꿀 수 있 는 방법,첫 줄 에
this.$forceUpdate();
이상 의 이 VUE 비동기 업데이트 DOM-$nextTick 으로 DOM 보기 의 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주시 기 바 랍 니 다.