$nextTick VS setTimeout, 차이점 확인

이 기사에서는 $nextTick과 setTimeout을 간략하게 비교하여 차이점을 살펴보겠습니다.

프런트엔드 개발자(Xiao Zhi)가 Vue 바에 들어왔습니다. Ash는 자신이 가장 좋아하는 칵테일인 Nuxt를 주문했습니다. 바텐더님이 열심히 만드시네요. 그런 다음 그는 혼자서 수다를 떨기 시작했습니다.

Xiao Zhi는 Vue 3의 인스턴스 메소드에서 $nextTick을 발견하고 놀랐다고 말했습니다. Xiaozhi는 한동안 Vue를 사용해 왔으며 $watch 및 $emit를 인스턴스 메서드로 작성하는 데 익숙해졌습니다. 그렇다면 $nextTick은 어디에 사용되나요? Vue 문서에는 "다음 DOM 업데이트 주기 후에 실행되는 콜백을 연기합니다"라고 나와 있습니다. $nextTick的，并大吃一惊。小智使用Vue已经有一段时间了，他已经习惯了把$watch和$emit写成实例方法。那么，$nextTick是用来做什么的？Vue文档说，它"[defers]回调，在下一个DOM更新周期后执行"。

但是小智并不相信。

他继续讲述他是如何尝试这样做的：

this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false

有用。 为什么？

nextTick做什么？

nextTick接受一个延迟到下一个DOM更新周期的回调函数。这只是Vue的一种说法，"嘿，如果你想在DOM更新后执行一个函数（这种情况很少发生），我希望你使用nextTick而不是setTimeout"。

Vue.nextTick(() => {}) // syntax

下面很快就会讲到setTimeout和nextTick参数。我们用这个例子来可视化nextTick的行为:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    this.$nextTick(() => {
        let date = new Date()
        this.currentTime = date.getFullYear()
    });
  }
}
</script>

在J电脑上运行这个代码片段。它将显示2021年。并不是说如果你去掉nextTick，就不会得到同样的结果。然而，你应该明白，Vue会根据数据中的内容对DOM进行修改。

在上面的代码片段中，Vue将DOM更新为3，然后调用回调，将DOM更新为2021，最后将控制权交给浏览器，浏览器将显示2021。

到目前为止，我们已经研究了nextTick在回调队列中插入回调函数并在适当的时候执行该函数。

这个你可能会感兴趣，nextTick中的回调是作为事件循环中的一个微任务使用的。nextTick的源代码明确指出，"nextTick行为利用了微任务队列，可以通过本地的Promise.then或MutationObserver来访问。"

setTimeout vs nextTick

在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()函数。

我们将上面的代码用setTimeout替换nextTick:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    setTimeout(() => {
      let date = new Date()
      this.currentTime = date.getFullYear()
    }, 0);
  }
}
</script>

运行此代码片段。 首先看到3然后2021。它发生得很快，因此如果没有看到此行为，需要刷新浏览器。

在上面的代码片段中，Vue将DOM更新为3，并提供浏览器控制。然后浏览器显示3，调用回调函数，将DOM更新到2021，最后将控制权交给浏览器，现在浏览器显示2021。

nextTick的实现在不支持Promise和MutationObserver的浏览器（IE 6-10和Opera Mini浏览器）上，使用setTimeout作为后备方法，对于不支持Promise和MutationObserver的浏览器（IE 10），它更倾向于setImmediate。

何时使用 nexttick

• 当你想使用setTimeout时
• 当你想确定DOM能反映你的数据时
• 在尝试执行异步操作时，遇到Uncaught (in promise) DOMException等错误。记住，Vue是异步更新DOM的

最后来个示例:

<div id="app">
  <div ref="listScroll" class="scrolledList">
    <ul ref="scrolledHeight">
      <li v-for="month in months">
        {{month}}
      </li>               
    </ul>
  </div>

  <input type="text" placeholder="Add Month" v-model="month">
  <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button>
</div>

<script src="https://unpkg.com/vue@next"> 
  Vue.createApp({
    data() {
      return {
        month: &#39;&#39;,
        months: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;Aug&#39;]
      }
    },
    mounted() {
      this.updateScrollNextTick()
    },
    methods: {
      addMessage() {
        if(this.month == &#39;&#39;){
          return
        }

        this.months.push(this.month)
        this.month = &#39;&#39;
        this.updateScrollNextTick()
      },
      updateScrollNextTick () {
        let scrolledHeight = this.$refs.scrolledHeight.clientHeight

        this.$nextTick(() => {
          this.$refs.listScroll.scrollTo({
            behavior: &#39;smooth&#39;,
            top: scrolledHeight
          })
        })
      }
    },
  })
  .mount("#app")
</script>

示例地址：https://codepen.io/ammezie/pen/OJpOvQE

主要部分：

运行结果：

在上面的代码片断中，我们想在一个新项目被添加到列表中时获得平滑的向下滚动效果。浏览一下代码，尝试修改一下，去掉nextTick，你就会失去那种平滑的滚动效果。你也可以尝试用setTimeout来代替nextTick

하지만 Xiaozhi는 그것을 믿지 않았습니다.

그는 계속해서 자신이 어떻게 이 작업을 시도했는지 설명합니다.

rrreee

작동합니다. 왜?

nextTick은 무엇을 하나요?

nextTick은 다음 DOM 업데이트 주기까지 지연되는 콜백 함수를 허용합니다. 이것은 Vue에서 "이봐, DOM이 업데이트된 후(거의 발생하지 않음) 함수를 실행하고 싶다면 setTimeout 코드> 대신 <code>nextTick을 사용하면 좋겠다"라고 말하는 방식입니다. 코드>".

rrreee

setTimeout 및 nextTick 매개변수는 곧 논의될 예정입니다. 이 예를 사용하여 nextTick의 동작을 시각화합니다.

rrreee

J 컴퓨터에서 이 코드 조각을 실행하세요. 2021 연도가 표시됩니다. nextTick을 제거해도 동일한 결과를 얻지 못한다는 것은 아닙니다. 그러나 Vue는 데이터 내용에 따라 DOM을 수정한다는 점을 이해해야 합니다.

위 코드 조각에서 Vue는 DOM을 3으로 업데이트한 다음 콜백을 호출하여 DOM을 2021로 업데이트하고 마지막으로 브라우저에 제어권을 넘겨줍니다. 브라우저에 2021이 표시됩니다. 🎜🎜지금까지 콜백 큐에 콜백 함수를 삽입하고 적절한 시간에 함수를 실행하는 nextTick을 살펴보았습니다. 🎜🎜이에 관심이 있으실 수도 있습니다. nextTick의 콜백은 이벤트 루프에서 마이크로태스크로 사용됩니다. nextTick의소스 코드에는 "nextTick 동작이 마이크로태스크 대기열을 활용하고 로컬을 통해 액세스할 수 있음이 명확하게 명시되어 있습니다. Promise.then 또는 MutationObserver를 사용하여 "🎜

setTimeout 대 nextTick🎜🎜DOM 업데이트 후 함수를 실행하는 또 다른 방법입니다. JavaScript의 setTimeout() 함수를 사용하세요. 🎜🎜위 코드를 setTimeout으로 바꾸고 nextTick을 바꿉니다. 🎜rrreee🎜이 코드 조각을 실행하세요. 먼저 3을 확인한 다음 2021을 확인하세요. 이는 빠르게 발생하므로 이 동작이 표시되지 않으면 브라우저를 새로 고쳐야 합니다. 🎜🎜위 코드 조각에서 Vue는 DOM을 3으로 업데이트하고 브라우저 제어를 제공합니다. 그런 다음 브라우저는 3를 표시하고 콜백 함수를 호출하고 DOM을 2021로 업데이트한 다음 마지막으로 브라우저에 제어권을 넘겨줍니다. 이제 브라우저는 2021를 표시합니다. > >. 🎜🎜nextTick은 Promise 및 MutationObserver(IE 6-10 및 Opera Mini 브라우저)를 지원하지 않는 브라우저에서 구현됩니다. >etTimeout

은 대체 방법으로 사용되며 Promise 및 MutationObserver(IE 10) 코드를 지원하지 않는 브라우저의 경우 setImmediate를 선호합니다. >. 🎜

nexttick을 사용해야 할 때🎜

• setTimeout을 사용하고 싶을 때
• 확인하고 싶을 때 DOM은 데이터를 반영할 때
• 비동기 작업을 수행하려고 할 때 Uncaught (in promise) DOMException과 같은 오류가 발생합니다. Vue는 DOM을 비동기식으로 업데이트합니다.

🎜마지막으로 예는 다음과 같습니다.🎜rrreee🎜🎜예제 주소: https://codepen.io/ammezie/pen/OJpOvQE🎜

🎜Main 부분: 🎜🎜🎜 🎜실행 결과: 🎜🎜🎜🎜위 코드 조각에서는 새 항목이 목록에 추가될 때 부드러운 스크롤 다운 효과를 얻고 싶습니다. 코드를 살펴보고 nextTick을 제거하도록 변경해 보세요. 그러면 부드러운 스크롤 효과가 사라집니다. nextTick 대신 setTimeout을 사용해 볼 수도 있습니다. 🎜🎜요약🎜🎜이 기사에서는 nextTick이 어떻게 작동하는지 살펴보았습니다. 일반적인 JavaScript setTimeout과 어떻게 다른지 자세히 살펴보고 실제 사용 사례를 다룹니다. 🎜🎜🎜영어 원문 주소: https://blog.logrocket.com/understanding-nexttick-in-vue-js/🎜🎜저자: Chimezie Enyinnaya🎜🎜번역자: 프론트엔드 Xiaozhi🎜🎜재인쇄 주소: https:// Segmentfault.com/a/1190000040246186🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 $nextTick VS setTimeout, 차이점 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!