updated (updated)
هوک updated یعنی «بعد از بروزرسانی». وقتی DOM تازه رندر شد، این اجرا می شود. بنابراین الان می توانی وضعیت جدید صفحه را ببینی.
updated دقیقاً چه می کند؟
این هوک بعد از بروزرسانی درخت DOM اجرا می شود. داده ها و DOM هر دو تازه هستند. پس می توانی اندازه گیری یا لاگ بگیری.
نمونه منبع: شمارش آپدیت DOM
export default {
data() {
return {
sliderVal: 50,
renderCount: 0
};
},
updated() {
this.renderCount++;
console.log('Updated ' + this.renderCount + ' times.');
}
};
خطر حلقه بی نهایت
هشدار: اگر در updated دوباره داده را تغییر دهی، دوباره رندر می شود. این کار updated را دوباره صدا می زند. نتیجه، حلقه بی نهایت است.
نکته: برای واکنش به تغییرات، از beforeUpdate بیشتر استفاده کن. آن جا DOM هنوز عوض نشده است.
کار پس از رندر با nextTick
گاهی نیاز داری بعد از بروزرسانیِ DOM، کدی اجرا کنی. از nextTick یا this.$nextTick کمک بگیر. این کار اجرا را کمی عقب می اندازد.
گام های سریع
- داده تغییر می کند.
- ویو رندر تازه انجام می دهد.
- updated اجرا می شود.
- کار سبک انجام بده؛ داده را تغییر نده.
جمع بندی سریع
- بعد از رندر DOM اجرا می شود.
- برای لاگ و اندازه گیری مناسب است.
- تغییر داده این جا خطرناک است.
- برای ایمنی، سراغ beforeUpdate برو.
برای مرور همه مراحل، صفحه هوک های چرخه عمر ویو را ببین. همچنین برای دسترسی DOM اولیه، mounted را مطالعه کن.
منابع: updated در W3Schools، beforeUpdate در W3Schools، $nextTick در W3Schools.