nextTick이란 무엇이며 vue.js에서는 무엇을 하는가?
문서를 읽었는데 아직도 이해가 안 돼.
좋은 수가 있어요.datacomputedwatchmethods하지만 무엇이든지nextTick()Vue.js에 쓰였나?
타이밍에 관한 거야
nextTick 일부 데이터를 변경한 후 코드를 실행할 수 있으며 Vue.js는 데이터 변경에 따라 가상 DOM을 업데이트했지만 브라우저가 페이지에 해당 변경 사항을 렌더링하기 전에 코드를 실행할 수 있다.
일반적으로 devs는 네이티브 자바스크립트 함수를 사용하여 유사한 동작을 달성하지만setTimeout콜백(callback)을 통해 브라우저가 다시 제어 권한을 부여하기 전에 브라우저에 대한 제어 권한을 포기하십시오.
예
일부 데이터를 변경했다고 가정해 봅시다. 그러면 Vue는 해당 데이터 변경 사항을 기반으로 vDOM을 업데이트합니다(브라우저에 의해 아직 화면에 변경 사항이 렌더링되지 않음).
사용했다면nextTick이 시점에서, 당신의 콜백은 즉시 호출될 것이고, 브라우저는 콜백 실행이 끝난 후에 페이지를 업데이트 할 것이다.
만약 당신이 대신 사용한다면setTimeout그러면 브라우저가 페이지를 업데이트하고 콜백이 호출될 것이다.
다음과 같은 작은 구성 요소를 생성하여 이러한 동작을 시각화할 수 있다.
(이 바이올린 라이브를 보려면 이 바이올린에 체크 표시)
<template>
<div class="hello">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'One'
}
},
mounted() {
this.msg = 'Two';
this.$nextTick(() => {
this.msg = 'Three';
});
}
}
</script>
로컬 서버를 실행하십시오."Three"라는 메시지가 표시되는 것을 볼 수 있다.
, 자자, 자.this.$nextTick와 함께setTimeout:
setTimeout(() => {
this.msg = 'Three';
}, 0);
브라우저를 다시 로드하십시오.당신은 "Two"를 보기 전에 "Two"를 보게 될 것이다.
왜하하면.setTimeout:
- Vue는 vDOM을 업데이트하여 "Two"라고 말함
- Vue는 브라우저를 제어했다.
- 브라우저에 "Two"가 표시됨
- 콜백을 불렀다.
- Vue는 vDOM을 업데이트하여 "Three"라고 말함
- Vue는 브라우저를 제어했다.
- 브라우저에 "3"이 표시됨
하지만 함께라면nextTick2, 3단계는 건너뛰어!Vue는 첫 번째 vDOM 업데이트 후 제어 권한을 넘겨주는 대신 콜백을 즉시 호출하므로 콜백이 완료될 때까지 브라우저가 업데이트되지 않는다.이 예에서, 그것은 "Two"가 실제로 표시되지 않는다는 것을 의미한다.
부에가 이를 어떻게 구현하는지 이해하려면 자바스크립트 이벤트 루프와 마이크로태스크의 개념을 이해해야 한다.
이러한 개념을 명확히 이해했으면 nextTick의 소스 코드를 확인하십시오.
Next Tick(다음) 체크 표시를 사용하면 반응 속성(데이터)을 일부 변경했을 때 vue가 구성 요소를 다시 렌더링한 후 일부 코드를 실행할 수 있다.
// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
// this function is called when vue has re-rendered the component.
})
// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
.then(function () {
// this function is called when vue has re-rendered the component.
})
Vue.js 설명서:
다음 DOM 업데이트 주기 후 실행할 콜백 연기.일부 데이터를 변경한 후 즉시 사용하여 DOM 업데이트를 기다리십시오.
자세한 내용은 여기를 참조하십시오.
사용의 차이에 대한 Pranshat의 답변을 만드는 방법nextTick그리고setTimeout좀 더 분명히 말하지만, 나는 그의 안무를 포기했다: 여기.
mounted() {
this.one = "One";
setTimeout(() => {
this.two = "Two"
}, 0);
//this.$nextTick(()=>{
// this.two = "Two"
//})}
}
사용할 때 바이올린에서 볼 수 있다.setTimeOut초기 데이터는 변경사항을 적용하기 전에 구성 요소가 장착되면 매우 잠깐 깜박인다.반면에, 사용할 때nextTick브라우저에 렌더링하기 전에 데이터를 가로채고 변경한다.그래서 브라우저는 구식도 모른 채 업데이트된 데이터를 보여준다.그렇게 되면 두 가지 개념이 일거에 풀리기를 바란다.
나는 Vuejs에서 nextTick을 사용할 수 있는 시나리오에 대한 유용한 데모를 만들었다. 만약 당신이 DOM 업데이트 직후 무언가를 업데이트하거나 실행하려면, 내가 nextTick 기능을 사용하여 스크롤을 업데이트하고 최신 메시지를 보기 위해 다른 기능을 호출하는 addMessage 함수를 참조하라.
<!DOCTYPE html>
<html>
<head>
<title>CDN VUE 3</title>
</head>
<body>
<div id="app">
<div ref="scrolledList" style="height: 100px; width: 150px; border:1px solid red; overflow: auto; margin-bottom: 15px; padding: 5px;">
<ul ref="scrolledHeight" style="margin: 0; padding: 0;">
<li v-for="msg in messages">
{{msg}}
</li>
</ul>
</div>
<input type="text" placeholder="Add Message" v-model="message" />
<button @click="addMessage" @keyup.enter="addMessage"> Add Message</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
message: '',
messages: [1,2,3,4,5,6,7,8,9,10]
}
},
mounted() {
this.updateScrollNextTick()
},
methods: {
addMessage() {
if(this.message == ''){
return
}
this.messages.push(this.message)
this.message = ""
this.updateScrollNextTick()
},
updateScrollNextTick () {
this.$nextTick( () => {
let scrolledHeight = this.$refs.scrolledHeight.clientHeight
this.$refs.scrolledList.scrollTo({
behavior: 'smooth',
top: scrolledHeight
})
})
}
},
})
.mount("#app")
</script>
</body>
</html>참조URL: https://stackoverflow.com/questions/47634258/what-is-nexttick-and-what-does-it-do-in-vue-js
'programing' 카테고리의 다른 글
| 여러 개의 b-form-radio-group을 사용하여 이들 사이의 시각적 간섭을 피하려면 어떻게 해야 하는가? (0) | 2022.03.27 |
|---|---|
| python 3.x에서 string.replace()를 사용하는 방법 (0) | 2022.03.27 |
| reactive native를 위한 단순한 동기식 스토리지 옵션이 있는가? (0) | 2022.03.27 |
| React Class Component에서 Mobx Store의 값을 사용하시겠습니까? (0) | 2022.03.26 |
| react-router에서 앱의 기본 이름 구성 (0) | 2022.03.26 |