activated (activated)
هوک «activated در ویو (Vue)» وقتی کامپوننت کش شده برگردد اجرا می شود. «هوک (Hook)» یعنی زمان آماده اجرای کد. کامپوننتِ کش شده با «<KeepAlive>» نگه داری می شود. سپس هر بار وارد DOM شد، این هوک صدا می شود. مثل برگرداندن برگه امتحان از بایگانی.
activated در ویو چیست؟
این هوک هنگام درج دوباره کامپوننتِ کش شده در DOM اجرا می شود. کش با کامپوننتِ <KeepAlive> ساخته می شود. توجه کن، کامپوننت ممکن است چندبار وارد و خارج شود. اما هر ورود، activated را اجرا می کند.
نمونه کد از منبع
در این مثال، mounted و سپس هر activated در لیست ثبت می شود.
<script>
export default {
mounted() {
console.log("mounted");
const liEl = document.createElement("li");
liEl.innerHTML = "mounted";
this.$refs.olEl.appendChild(liEl);
},
activated() {
console.log("activated");
const liEl = document.createElement("li");
liEl.innerHTML = "activated";
this.$refs.olEl.appendChild(liEl);
}
}
<\/script>
تفاوت با mounted
mounted فقط بارِ اولِ ساخت کامپوننت اجرا می شود. اما activated هر بارِ ورود همان کامپوننتِ کش شده اجرا می شود. بنابراین برای تازه سازی موقت مناسب است.
گام های عملی
- کامپوننت را داخل <KeepAlive> قرار بده.
- منطق تازه سازی را در activated بنویس.
- منابع موقت را با deactivated متوقف کن.
نکته ها و هشدارها
نکته: برای بارگذاری سبک، داده سریع را در activated به روز کن.
نکته: کارهای سنگین را به mounted بسپار. تجربه سریع تر می شود.
هشدار: در activated از ایجاد تایمرهای تکراری پرهیز کن. نشت می سازد.
پیوندهای مرتبط
برای خروجِ موقت، صفحه deactivated را ببین. برای آغاز اولیه، صفحه mounted مناسب است. همچنین چرخه حذف را در unmounted بررسی کن.
جمع بندی سریع
- activated با ورود دوباره اجرا می شود.
- فقط برای کامپوننت های داخل KeepAlive است.
- برای تازه سازی سریع عالی است.
- با deactivated جفتِ خوبی می سازد.
- با mounted تفاوت زمانی دارد.