$nextTick()

$nextTick() 이란?

•  Javascript는 비동기로 처리되는 특성을 가지고 있습니다. 
• 데이터가 업데이트 되고 나서 ui가 갱신될 때 뷰가 dom을 제대로 찾지 못하는 경우가 있습니다
• 이러한 문제점을 해결해주는 것이 callback 함수인 $nextTick() 입니다. 

---

사용예시

HTML

<div>
    <div ref="listScroll" class="scrolledList">
      <ul ref="scrolledHeight">
        <li :key="month" 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>

SCIRPT

<script>
export default {
  data() {
    return {
      month: "",
      months: ["Jan", "Feb", "Apr", "May", "June", "July", "Aug"],
    };
  },
  mounted() {
    this.updateScrollNextTick();
  },
  created() {},
  destroy() {},
  methods: {
    addMessage() {
      if (this.month == "") {
        return;
      }

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

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

화면

** nextTick()가 없으면 add month 누르고 데이터가 추가되면 추가 되고 스크롤이 제일 아래로 내려가야되는데, 그 이전 데이터까지 스크롤이 내려가고 그 다음 데이터가 추가 된다. 

따라서 데이터가 추가되고 스크롤이벤트가 발생되게 하기 위해서 nextTick()를 사용해야 한다. 

 

참고

https://blog.logrocket.com/understanding-nexttick-in-vue-js/