Vue - 렌더링 완료에 연결할 수 있는 방법이 있습니까?

Vue - 렌더링 완료에 연결할 수 있는 방법이 있습니까?

알고 있습니다mounted그리고.created라이프 사이클의 훅이 되어 시험해 본 적이 있습니다.저도 한번 써봤어요.$nextTick정확한 렌더링을 얻을 수 없습니다.현재 초기 렌더링 후 돔 노드에서 일부 데이터에 액세스하려고 합니다.내 코드의 관련 부분은 다음과 같습니다.

mounted() {
  console.log(this.$el.getBoundingClientRect().top);
},

이것은 나에게 잘못된 데이터를 주고 있다.단, 다음 코드를 사용합니다.

mounted() {
  setTimeout(() => {
    console.log(this.$el.getBoundingClientRect().top);
  }, 1000)
},

정확한 데이터를 얻을 수 있습니다.임계값은 약 700~900밀리초 후에 올바른 데이터를 얻을 수 있습니다.

질문 1

모든 것이 완전히 렌더링되지 않은 상태에서 라이프 사이클이 실행되는 이유는 무엇입니까?

질문 2

아직 장착되지 않은 형제 컴포넌트가 차원을 밀어내는 것과 관련이 있습니까?

질문 3

해답이 있나요? 기본적으로 '페이지에 있는 모든 것이 렌더링되었습니다'라고 하는 이벤트에 연결할 수 있습니다.

나는 그 사람을 좋아하지 않는다.setTimeout확실한 이유 때문에 제가 생각해낸 해결책입니다.

사물이 비동기적으로 렌더링되기 때문에 위치가 변경되지 않을 수 있습니다.뭔가 업데이트될 때마다 그 자리를 차지해야 할 것 같습니다.이것은 커스텀 디렉티브를 사용하여 실행할 수 있습니다.update업데이트되면 함수가 호출됩니다.

여기 간단한 데모가 있습니다.

new Vue({
  el: '#app',
  data: {
    ht: 100,
    top: null
  },
  directives: {
    bounding(el, binding, vnode) {
      vnode.context[binding.expression] = el.getBoundingClientRect().top;
    }
  },
  mounted() {
    let times = 5;
    const i = setInterval(() => {
      this.ht += 10;
      if (--times < 1) {
        clearInterval(i);
      }
    }, 1000);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div :style="{height: `${ht}px`}">Hi</div>
  <div v-bounding="top">{{top}}</div>
</div>

Q1: 라이프 사이클 훅은 인스턴스 자체에만 관심이 있으며 돔의 나머지 부분은 관심이 없습니다.따라서 구성 요소가 완전히 마운트된 동안 나머지 페이지를 보류할 수 있습니다.

Q2: Q1과 동일합니다.

Q3: 다음을 사용할 수 있습니다.

document.addEventListener("DOMContentLoaded", function(event) {
    console.log(this.$el.getBoundingClientRect().top);
});

자세한 답변은 $(문서)입니다.jQuery를 사용하지 않는 ready 등가물

편집

대신 다음을 사용해야 합니다.

window.addEventListener("load", function(event) {
    console.log(this.$el.getBoundingClientRect().top);
});

외부 자원에 대해 잊고 있었습니다. DOMContentLoaded즉, 돔이 로드될 때 발생합니다.html을 클릭합니다.load는 외부 리소스가 로드된 후에 실행됩니다.자세한 것은, https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/49035674/vue-is-there-any-way-to-tie-into-render-being-finished