Vue에서 $nextTick의 역할 및 사용

주로 데이터가 동적으로 변경된 후 DOM이 제 시간에 업데이트되지 않는 문제를 처리하는 데 사용되며, NextTick은 데이터 업데이트 후 최신 DOM 변경 사항을 얻는 데 사용할 수 있습니다.

시나리오 1: 버튼을 클릭하여 h1의 너비를 가져옵니다.

<template>
  <div>
    <h1 ref="myWidth" v-if="show">{
   
   { message }}</h1>
    <button @click="getWidth">获取h1元素宽度</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      message: ""
    }
  },
  methods: {
    getWidth() {
      this.show = true
      this.$nextTick(() => {
        //这句代码如果不放在nextTick会报错，因为v-if动态创建销毁标签，牵扯到生命周期
        this.message = this.$refs.myWidth.offsetWidth
      })

    }
  }
}
</script>

시나리오 2: 버튼을 클릭하여 입력 상자의 포커스 가져오기

<template>
  <div>
    <input type="text" ref="myInput" v-show="show" id="id">
    <button @click="getFocus">获取input元素焦点</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    }
  },
  methods: {
    getFocus() {
      this.show = true
      this.$nextTick(() => {
        document.getElementById("id").focus()
      })

    }
  }
}
</script>

또한 nextTick에는 양식 추가 및 편집 기능을 포함하여 많은 응용 시나리오가 있으며 동일한 모달 상자에 데이터를 표시하는 버그도 이를 사용하여 해결할 수 있습니다.