nextTick در vue js

بعد از اینکه داده ای رو تغییر دادی و VueJS هم DOM رو آپدیت کرد، 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 رو خواهی دید
اما اگر از setTimeout استفاده کنی.. یه لحظه بسیار کوتاه Two رو میبینی و بعدش Three

اتفاقی که در setTimeout میفته: VueJs ابتدا DOM رو آپدیت میکنه و msg برابر ۲ میشه. سپس کنترل رو به مرورگر میده. مرورگر ۲ رو نمایش میده و سپس callback رو فرا میخونه و msg برابر ۳ میشه و اون وقفه دیده میشه.

اتفاقی که در nextTick میفته: VueJs ابتدا DOM رو آپدیت میکنه و msg برابر ۲ میشه. callback فراخوانی میشه .. msg برابر با ۳ میشه و در مرورگر به نمایش در میاد.

@ali.bayat
خیلی ممنون

موفق باشی..

واقعا احسنت به شما جناب بیات احسنت
@ali.bayat

وقتی از nexttick استفاده میکنیم، انگار که این کد ها رو اخرین خط فایلمون نوشتیم : مثال :

<template>
  <div >
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
return {
}
  },
  mounted() {
console.log("one")

  this.$nextTick(() => {
console.log("two")  
});
  }

console.log("three")
}
</script>
// out put : 
one 
three 
two