કીપએલાઇવ (KeepAlive) ​

<KeepAlive> એ એક બિલ્ટ-ઇન ઘટક છે જે આપણને બહુવિધ ઘટકો વચ્ચે ડાયનેમિકલી સ્વિચ કરતી વખતે કમ્પોનન્ટ ઇન્સ્ટન્સને કેશ (cache) કરવાની મંજૂરી આપે છે.

મૂળભૂત વપરાશ (Basic Usage) ​

કમ્પોનન્ટ બેઝિક્સ (Component Basics) પ્રકરણમાં, આપણે <component> સ્પેશિયલ એલિમેન્ટનો ઉપયોગ કરીને ડાયનેમિક કમ્પોનન્ટ્સ માટેનો સિન્ટેક્સ રજૂ કર્યો હતો:

<component :is="activeComponent" />

ડિફોલ્ટ રૂપે, જ્યારે કોઈ સક્રિય કમ્પોનન્ટ ઇન્સ્ટન્સમાંથી સ્વિચ કરવામાં આવે ત્યારે તે અનમાઉન્ટ થઈ જશે. આનાથી તે ધરાવેલી કોઈપણ બદલાયેલી સ્ટેટ ખોવાઈ જશે. જ્યારે આ કમ્પોનન્ટ ફરીથી પ્રદર્શિત થાય છે, ત્યારે માત્ર પ્રારંભિક સ્ટેટ (initial state) સાથે નવો ઇન્સ્ટન્સ બનાવવામાં આવશે.

નીચેના ઉદાહરણમાં, આપણી પાસે બે સ્ટેટફુલ પ્રોજક્ટ્સ (components) છે - A માં કાઉન્ટર છે, જ્યારે B માં v-model દ્વારા ઇનપુટ સાથે સિંક કરેલ મેસેજ છે. તેમાંથી એકની સ્ટેટ અપડેટ કરવાનો પ્રયાસ કરો, સ્વિચ કરો અને પછી તેના પર પાછા સ્વિચ કરો:

તમે જોશો કે જ્યારે પાછા સ્વિચ કરવામાં આવે ત્યારે, અગાઉની બદલાયેલી સ્ટેટ રિસેટ થઈ ગઈ હશે.

સ્વિચ પર નવો ઘટક ઇન્સ્ટન્સ બનાવવો એ સામાન્ય રીતે ઉપયોગી વર્તન છે, પરંતુ આ કિસ્સામાં, આપણે ખરેખર ઇચ્છીએ છીએ કે બે ઘટક ઇન્સ્ટન્સ નિષ્ક્રિય હોય ત્યારે પણ સચવાયેલા રહે. આ સમસ્યાને ઉકેલવા માટે, આપણે આપણા ડાયનેમિક કમ્પોનન્ટને <KeepAlive> બિલ્ટ-ઇન કમ્પોનન્ટ સાથે લપેટી શકીએ છીએ:

<!-- નિષ્ક્રિય ઘટકો કેશ (cached) થશે! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

હવે, ઘટક સ્વિચ દરમિયાન સ્ટેટ સચવાયેલી રહેશે:

ઇન્ક્લુડ / એક્સક્લુડ (Include / Exclude) ​

ડિફોલ્ટ રૂપે, <KeepAlive> અંદરના કોઈપણ કમ્પોનન્ટ ઇન્સ્ટન્સને કેશ કરશે. આપણે include અને exclude પ્રોપ્સ દ્વારા આ વર્તનને કસ્ટમાઇઝ કરી શકીએ છીએ. બંને પ્રોપ્સ અલ્પવિરામથી અલગ કરેલી સ્ટ્રિંગ, RegExp અથવા બંને પ્રકારો ધરાવતા એરે હોઈ શકે છે:

<!-- અલ્પવિરામથી અલગ કરેલી સ્ટ્રિંગ -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (`v-bind` વાપરો) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- એરે (`v-bind` વાપરો) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

મેચ કમ્પોનન્ટના name ઓપ્શન સામે તપાસવામાં આવે છે, તેથી જે કમ્પોનન્ટ્સને KeepAlive દ્વારા કેશ કરવાની જરૂર છે તેમણે સ્પષ્ટપણે name ઓપ્શન જાહેર કરવો જોઈએ.

મહત્તમ કેશ્ડ (Cached) ઇન્સ્ટન્સ ​

અમે max પ્રોપ દ્વારા કેશ કરી શકાય તેવા સોફ્ટવેર ઘટકોની મહત્તમ સંખ્યાને મર્યાદિત કરી શકીએ છીએ. જ્યારે max નિર્દિષ્ટ કરવામાં આવે છે, ત્યારે <KeepAlive> એક LRU કેશ ની જેમ વર્તે છે: જો કેશ કરેલ ઇન્સ્ટન્સની સંખ્યા નિર્દિષ્ટ મહત્તમ સંખ્યાને ઓળંગવાની હોય, તો નવા માટે જગ્યા બનાવવા માટે સૌથી ઓછા સમય પહેલાં એક્સેસ કરાયેલ કેશ ઇન્સ્ટન્સ નાશ પામશે.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

કેશ્ડ (Cached) ઇન્સ્ટન્સનું લાઇફસાયકલ (Lifecycle of Cached Instance) ​

જ્યારે કમ્પોનન્ટ ઇન્સ્ટન્સને DOM માંથી દૂર કરવામાં આવે છે પરંતુ તે <KeepAlive> દ્વારા કેશ કરાયેલ કમ્પોનન્ટ ટ્રીનો ભાગ હોય છે, ત્યારે તે અનમાઉન્ટ થવાને બદલે નિષ્ક્રિય (deactivated) સ્ટેટમાં જાય છે. જ્યારે કમ્પોનન્ટ ઇન્સ્ટન્સને કેશ કરેલા ટ્રીના ભાગ તરીકે DOM માં દાખલ કરવામાં આવે છે, ત્યારે તે સક્રિય (activated) થાય છે.

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // પ્રારંભિક માઉન્ટ પર કૉલ કરવામાં આવે છે
  // અને દર વખતે જ્યારે તેને કેશમાંથી ફરીથી દાખલ કરવામાં આવે છે
})

onDeactivated(() => {
  // જ્યારે DOM માંથી કેશમાં દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે
  // અને જ્યારે અનમાઉન્ટ કરવામાં આવે ત્યારે પણ
})
</script>

export default {
  activated() {
    // પ્રારંભિક માઉન્ટ પર કૉલ કરવામાં આવે છે
    // અને દર વખતે જ્યારે તેને કેશમાંથી ફરીથી દાખલ કરવામાં આવે છે
  },
  deactivated() {
    // જ્યારે DOM માંથી કેશમાં દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે
    // અને જ્યારે અનમાઉન્ટ કરવામાં આવે ત્યારે પણ
  }
}

નોંધ લો કે:

• onActivatedactivated માઉન્ટ પર પણ કહેવાય છે, અને onDeactivateddeactivated અનમાઉન્ટ પર પણ કહેવાય છે.

• બંને હૂક્સ માત્ર <KeepAlive> દ્વારા કેશ કરાયેલ રૂટ ઘટક માટે જ નહીં, પણ કેશ કરેલા ટ્રીમાં વંશજ ઘટકો (descendant components) માટે પણ કામ કરે છે.

સંબંધિત

• <KeepAlive> API રિફરન્સ