VUE 실시 간 감청 요소 의 상단 높이 조작

효과 도 는 다음 과 같다.

.html

<!--   ref       -->
<div ref="pronbit">
 <div>    </div>
 <div>    </div>
</div>

.js

mounted(){
 window.addEventListener('scroll',this.handleScrollx,true)
},
methods: {
 handleScrollx() {
  console.log('    ',window.pageYOffset)
  console.log('      ',this.$refs.pronbit.getBoundingClientRect().top)
 },
}

추가 지식:Vue 비동기 업데이트 대기 열 및$nextTick 사용
질문 1:$nextTick 이 무엇 입 니까?
간단 한 대답:
Vue 의 비동기 업데이트 대기 열 때문에$nextTick 은 DOM 업데이트 가 언제 끝 났 는 지 알 아 보 는 데 사 용 됩 니 다.
상세 한 해석:
우 리 는 먼저 이러한 장면 을 보 겠 습 니 다.div 가 있 습 니 다.기본적으로 v-if 로 숨 기 고 단 추 를 누 른 후에 v-if 의 값 을 바 꾸 어 표시 하고 이 div 의 텍스트 내용 을 가 져 옵 니 다.v-if 의 값 이 false 라면 div 내용 을 직접 가 져 올 수 없습니다.이때 div 가 생 성 되 지 않 았 기 때문에 단 추 를 누 른 후에 v-if 의 값 을 true 로 바 꿔 야 div 가 생 성 됩 니 다.이때 다시 가 져 옵 니 다.예제 코드 는 다음 과 같 습 니 다.

  <div id="app">
    <div id="div" v-if="showDiv">      </div>
    <button @click="getText">  div  </button>
  </div>
  <script>
  var app = new Vue({
    el : "#app",
    data:{
      showDiv : false
    },
    methods:{
      getText:function(){
        this.showDiv = true;
        var text = document.getElementById('div').innnerHTML;
         console.log(text);
      }
    }
  })
  </script>

이 코드 는 이해 하기 어렵 지 않 지만 실행 후 콘 솔 에서 오류 가 발생 합 니 다.Cannot read property'innerHTML of null 은 div 요 소 를 얻 지 못 한 다 는 뜻 입 니 다.여기 서 Vue 와 관련 된 중요 한 개념:비동기 업데이트 대기 열.
비동기 업데이트 대기 열
Vue 는 데이터 변 화 를 관찰 할 때 DOM 을 직접 업데이트 하 는 것 이 아니 라 하나의 대기 열 을 열 고 같은 이벤트 순환 에서 발생 하 는 모든 데이터 변 화 를 버퍼 링 합 니 다.버퍼 링 시 중복 데 이 터 를 제거 하여 불필요 한 계산 과 DOM 작업 을 피 합 니 다.그리고 다음 이벤트 순환 tick 에서 Vue 가 대기 열 을 새로 고치 고 실제 작업 을 수행 합 니 다.그래서 만약 에 하나의 for 순환 으로 데 이 터 를 100 번 동적 으로 바 꾸 면 사실은 마지막 변화 만 적용 할 것 이다.만약 에 이런 체제 가 없 으 면 DOM 은 100 번 을 다시 그 려 야 한다.이것 은 물론 큰 비용 이다.
Vue 는 현재 브 라 우 저 환경 에 따라 네 이 티 브 Promise.then 과 MutationObserver 를 우선 사용 하 며,모두 지원 되 지 않 으 면 setTimeout 으로 대체 합 니 다.
Vue 비동기 업데이트 DOM 의 원 리 를 알 게 되면 위의 예제 의 오류 도 이해 하기 어렵 지 않다.사실 this.showDiv=true 를 실행 할 때 div 는 생 성 되 지 않 았 습 니 다.다음 vue 이벤트 가 순환 할 때 까지 만 들 기 시 작 했 습 니 다.$nextTick 은 DOM 업데이트 가 언제 완 료 될 지 알 기 위해 서 입 니 다.따라서 위의 예제 코드 는 다음 과 같이 수정 해 야 합 니 다.

  <div id="app">
    <div id="div" v-if="showDiv">      </div>
    <button @click="getText">  div  </button>
  </div>
  <script>
  var app = new Vue({
    el : "#app",
    data:{
      showDiv : false
    },
    methods:{
      getText:function(){
        this.showDiv = true;
        this.$nextTick(function(){
           var text = document.getElementById('div').innnerHTML;
           console.log(text); 
        });
      }
    }
  })
  </script>

이때 이 벤트 를 클릭 하면 콘 솔 에서 div 의 내용 을 출력 합 니 다.이것 은 텍스트 입 니 다.
이론 적 으로 우 리 는 DOM 을 주동 적 으로 조작 하지 않 아 도 된다.Vue 의 핵심 사상 은 바로 데이터 구동 DOM 이기 때문이다.그러나 많은 업무 에서 우 리 는 일부 제3자 라 이브 러 리,예 를 들 어 popper.js,swiper 등 을 사용 하 는 것 을 피 할 수 없다.이런 원생 자바 script 을 바탕 으로 하 는 라 이브 러 리 는 모두 생 성 되 고 더욱 새 롭 고 소각 되 는 완전한 생명 주 기 를 가지 고 Vue 와 함께 사용 할 때$nextTick 을 잘 이용 해 야 한다.
이상 의 VUE 실시 간 감청 요소 가 상단 높이 에서 작 동 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.