vue.js: nextTick은 데이터 변경 후 돔 렌더링을 완료하려면 어떻게 해야 합니까?
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue,에서는 렌더링 완료 후 (예를 들어 요소의 새로운 폭과 높이를 취득하는 등) 작업을 하고 싶은 경우 다음 콜백으로 작업을 수행해야 한다고 합니다.Vue.nextTick(callback)
그러나 몇 번인가 동작하지 않는 것을 알게 되어(다른 사람도 동작하지 않는 경우가 있는지는 모르겠습니다)에 의지할 필요가 있습니다.setTimeout
고치기 위해서요
어떻게 그럴 수긍이 가지 않는다nextTick
렌더링이 완전히 완료되도록 할 수 있습니다.소스코드를 읽었더니 이 코드가Promise.then
,setImmediate
또는setTimeout(cb, 0)
에서 코드를 실행하다nextTick
돔 렌더링은 이벤트 루프의 틱 사이에 언제든지 발생할 수 있다고 생각합니다.그래서 모든 내부 방법이nextTick
새로운 렌더링 작업이 완료되었는지 확인할 수 없습니다.
[메모] 전화하는 것이 좋은 방법인지 아닌지에 대해서는 이야기하고 싶지 않습니다.nextTick
문제를 해결하려면 , 그것은 다른 질문입니다.내 요점은 왜 그것이 제공된 것을 할 수 있느냐는 것이다(돔 렌더가 완료됨).
누가 그것에 대해 설명해 줄 수 있나요?고마워요.
nextTick
DOM 렌더의 완료를 보증하는 것은 아닙니다.DOM 구조가 갱신되는 것을 보증할 뿐입니다.
다음과 같은 방법으로 업데이트된 DOM에 액세스할 수 있습니다.this.$refs.p.innerHTML
nextTick의 콜백으로 이동합니다.하지만 아직 화면에 그 내용이 보이지 않을 수 있습니다.
nextTick
콜백을 마이크로태스크 큐에 넣습니다.모든 마이크로태스크가 완료되면 브라우저는 새로운 콘텐츠를 렌더링할 수 있습니다.
컨텐츠가 화면에 표시될 때까지 기다리려면setImmediate
(IE 한정) 또는setTimeout(fn, 0)
렌더링 태스크보다 우선순위가 낮기 때문에 새 내용이 표시된 후 실행됩니다.
예를 들어 fidle을 참조해 주세요.
https://forum.vuejs.org/t/does-nexttick-work-weirdly/42918/7
언급URL : https://stackoverflow.com/questions/51296969/vue-js-how-can-nexttick-ensure-that-dom-render-is-completed-after-data-change
'programing' 카테고리의 다른 글
Vue 루트:Uncaught Type Error: 창.Vue.use는 함수가 아닙니다. (0) | 2022.07.18 |
---|---|
vue-resize-direction이 실행되지 않는 이유는 무엇입니까? (0) | 2022.07.18 |
vue.js에서 Jquery 이벤트를 포착하는 방법 (0) | 2022.07.18 |
Spring Boot 컨트롤러에서 쿼리 파라미터를 취득하려면 어떻게 해야 합니까? (0) | 2022.07.18 |
로그인 명령 구현 및 vuex 스토어 액세스 (0) | 2022.07.18 |