فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — <KeepAlive> (<KeepAlive>)

آخرین بروزرسانی: 1404/08/21
قبلی: کامپوننت های توکار (Built-in Components) بعدی: <Teleport> (<Teleport>)

<KeepAlive> (<KeepAlive>)

اینجا با کامپوننت KeepAlive آشنا می شویم. کامپوننت KeepAlive حالت (State) را نگه می دارد. بنابراین بین نماهای پویا جابه جا می شوی، اما ورودی ها نمی پرند.

کامپوننت KeepAlive چیست؟

کامپوننت (Component) یک تکه UI قابل استفاده دوباره است. KeepAlive دورِ کامپوننت های پویا قرار می گیرد و آن ها را کش می کند. سپس با بازگشت، همان وضعیت قبلی را می بینی.

نمونه پایه KeepAlive

&lt;template&gt;
  &lt;KeepAlive&gt;
    &lt;component :is="activeComp"&gt;&lt;/component&gt;
  &lt;/KeepAlive&gt;
&lt;/template&gt;

مشاهده در ادیتور

Prop ها: include، exclude، max

include: فقط همین نام ها کش می شوند.

&lt;template&gt;
  &lt;KeepAlive include="CompOne,CompThree"&gt;
    &lt;component :is="activeComp"&gt;&lt;/component&gt;
  &lt;/KeepAlive&gt;
&lt;/template&gt;

مشاهده در ادیتور

exclude: این نام ها کش نمی شوند.

&lt;template&gt;
  &lt;KeepAlive exclude="CompOne"&gt;
    &lt;component :is="activeComp"&gt;&lt;/component&gt;
  &lt;/KeepAlive&gt;
&lt;/template&gt;

مشاهده در ادیتور

max: حداکثر چند کامپوننت آخر کش شوند.

&lt;template&gt;
  &lt;KeepAlive :max="2"&gt;
    &lt;component :is="activeComp"&gt;&lt;/component&gt;
  &lt;/KeepAlive&gt;
&lt;/template&gt;

مشاهده در ادیتور

چرخه حیات هنگام کش شدن

وقتی کامپوننت کش می شود، بین حالت های activated و deactivated جابه جا می شود. بنابراین می توانی بر اساس فعال شدن یا غیرفعال شدن، منطق اجرا کنی.

گام های عملی سریع

  1. کامپوننت های پویا بساز و نام بده.
  2. دور آن ها KeepAlive بگذار.
  3. با include یا exclude محدوده بده.
  4. با max کش را کنترل کن.

نکته: اگر حافظه مهم است، مقدار max را کوچک نگه دار.

جمع بندی سریع

  • KeepAlive حالت UI را حفظ می کند.
  • include/ exclude انتخابی عمل می کنند.
  • max تعداد کش را محدود می کند.
  • activated/ deactivated برای کنترل منطق اند.

مطالب داخلی: کامپوننت KeepAlive، ویژگی is.

قبلی: کامپوننت های توکار (Built-in Components) بعدی: <Teleport> (<Teleport>)