$nextTick() ($nextTick())
متد $nextTick() یعنی «اجرای بعد از تیک بعدی». تیک (Tick) یک نوبت به روزرسانی DOM است. وقتی داده عوض می شود، DOM فوراً عوض نمی شود. بنابراین با $nextTick() صبر می کنیم تا DOM آپدیت شود، سپس کدمان اجرا شود.
تعریف و کاربرد
$nextTick() اجرا را تا بعد از به روزرسانی DOM نگه می دارد. بنابراین ابتدا تغییرات واکنشی اعمال می شوند. سپس کالبک یا ادامه کد اجرا می شود. این کار هماهنگی داده و DOM را تضمین می کند.
نکته: می توانی از نسخه سراسری nextTick() هم بیرون از یک کامپوننت استفاده کنی.
مثال 1: استفاده با کالبک (Callback)
ابتدا متن را عوض می کنیم. سپس قبل و بعد از $nextTick() محتوا را می خوانیم تا تفاوت را ببینیم.
<script>
export default {
methods: {
updateMsg() {
this.message = 'Hello! This is a new message.';
this.results.push(this.$refs.pEl.textContent);
this.$nextTick(() => {
this.results.push(this.$refs.pEl.textContent + ' (using $nextTick())');
});
}
}
};
<\/script>
مثال 2: استفاده async/await
اینجا با await صبر می کنیم تا DOM آپدیت شود. سپس مقدار تازه را می خوانیم.
<template>
<div>
<p ref="messageEl">{{ message }}</p>
<button v-on:click.once="updateMsg">Update Message</button>
<ol>
<li v-for="x in results" :key="x">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Initial Message',
results: []
};
},
methods: {
async updateMsg() {
this.message = 'Hello! This message is now updated.';
this.results.push(this.$refs.messageEl.textContent);
await this.$nextTick();
this.results.push(this.$refs.messageEl.textContent + ' (after await $nextTick())');
}
}
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
<\/style>
گام های عملی
- داده واکنشی را تغییر بده.
- در صورت نیاز، مقدار فعلی DOM را بخوان.
- با
$nextTick()صبر کن و دوباره DOM را بخوان.
هشدار: از $nextTick() فقط وقتی لازم است استفاده کن. استفاده بیهوده کد را پیچیده می کند.
لینک ها و ادامه مطالعه
مقایسه زمان بندی را با $forceUpdate() ببین. همچنین برای دسترسی مستقیم از $refs استفاده کن. برای تمرین، روی این لینک هم کلیک کن: به روزرسانی DOM با nextTick.
جمع بندی سریع
$nextTick()بعد از آپدیت DOM اجرا می شود.- با کالبک یا
awaitقابل استفاده است. - برای هماهنگی داده و DOM عالی است.
- زیاده روی نکن؛ فقط هنگام نیاز.