vue $nextTick을 사용하는 것과 vuejs에서 setTimeout 0을 사용하는 것의 차이점은 무엇입니까?

vue $nextTick을 사용하는 것과 vuejs에서 setTimeout 0을 사용하는 것의 차이점은 무엇입니까?

Vue.js 문서에서 $nextTick의 설명은 다음과 같습니다.

다음 DOM 업데이트사이클 후에 실행되는 콜백을 연기합니다.일부 데이터를 변경한 후 DOM 업데이트를 대기하기 위해 즉시 사용하십시오.

좋습니다! 두 번째 문장은 데이터가 변경된 후 바로 사용하라고 되어 있고, set Timeout이 0인 것도 바로 호출된다는 것을 알고 있습니다.이 두 가지 방법을 이해하기 위해 작은 샌드박스를 만들었는데, 여전히 두 가지 접근법의 차이를 알 수 없는 것 같습니까?

그들의 차이에 대해 어떤 설명이라도 해주시면 감사하겠습니다.

다른 점은 말이다.$nextTick는, DOM 가 갱신되고 있는 것을 알고, 거기에 따라서 트리거 됩니다.setTimeout는 idempotent이며 지정된 밀리초 지연 후에 트리거됩니다.후자의 훌륭한 답변을 참조해 주세요.단, 지연은 최소이며 정확한 타임아웃은 아닙니다.

---

예를 들어, 어떤 상태가 있으면, 그 상태가 다음과 같이 됩니다.<input>요소

<input ref="textBox" v-if="showTextBox">

사용.$nextTick콜백은 DOM이 업데이트 된 후에만 실행되므로 다음 작업을 안전하게 수행할 수 있습니다.<input>

this.showTextBox = true
this.$nextTick(() => {
  this.$refs.textBox.focus()
})

이제 (이론적인) 상황을 고려해 보겠습니다.이 상황을 더하는 데 임의의 시간이 걸립니다.<input>DOM 에 액세스 할 수 있는 시간은, DOM 에 액세스 할 수 있는 시간은,setTimeout콜백

this.showTextBox = true
setTimeout(() => {
  // will throw "Uncaught TypeError: Cannot read property 'focus' of undefined"
  this.$refs.textBox.focus() 
}, 0)

언급URL : https://stackoverflow.com/questions/63669783/what-is-the-difference-between-using-vue-nexttick-vs-settimeout-0-in-vuejs