લાઇફસાઇકલ હૂક્સ (Lifecycle Hooks) ​

દરેક Vue કમ્પોનન્ટ ઇન્સ્ટન્સ જ્યારે બનાવવામાં આવે છે ત્યારે તે પ્રારંભિક પગલાઓની શ્રેણીમાંથી પસાર થાય છે - ઉદાહરણ તરીકે, તેને ડેટા ઓબ્ઝર્વેશન સેટ કરવાની જરૂર છે, ટેમ્પલેટ કમ્પાઇલ કરવાની જરૂર છે, DOM માં ઇન્સ્ટન્સને માઉન્ટ કરવાની જરૂર છે અને ડેટા બદલાય ત્યારે DOM અપડેટ કરવાની જરૂર છે. રસ્તામાં, તે લાઇફસાઇકલ હૂક્સ (lifecycle hooks) નામના ફંક્શન્સ પણ ચલાવે છે, જે યુઝર્સને ચોક્કસ તબક્કાઓ પર પોતાનો કોડ ઉમેરવાની તક આપે છે.

લાઇફસાઇકલ હૂક્સ રજીસ્ટર કરવા ​

ઉદાહરણ તરીકે, onMountedmounted હૂકનો ઉપયોગ ઘટકે પ્રારંભિક રેન્ડરિંગ પૂર્ણ કર્યા પછી અને DOM નોડ્સ બનાવ્યા પછી કોડ ચલાવવા માટે થઈ શકે છે:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`કમ્પોનન્ટ હવે માઉન્ટ થયેલ છે.`)
})
</script>

export default {
  mounted() {
    console.log(`કમ્પોનન્ટ હવે માઉન્ટ થયેલ છે.`)
  }
}

અન્ય હૂક્સ પણ છે જે ઇન્સ્ટન્સની લાઇફસાઇકલના વિવિધ તબક્કાઓ પર કોલ કરવામાં આવશે, જેમાંથી સૌથી સામાન્ય રીતે ઉપયોગમાં લેવાતા હૂક્સ onMounted, onUpdated, અને onUnmounted છે.mounted, updated, અને unmounted છે.

setTimeout(() => {
  onMounted(() => {
    // આ કામ કરશે નહીં.
  })
}, 100)

લાઇફસાઇકલ ડાયાગ્રામ (Lifecycle Diagram) ​

નીચે ઇન્સ્ટન્સ લાઇફસાઇકલ માટેનો ડાયાગ્રામ છે. અત્યારે જે કંઈ થઈ રહ્યું છે તે બધું તમારે સંપૂર્ણપણે સમજવાની જરૂર નથી, પરંતુ જેમ જેમ તમે શીખશો અને વધુ બનાવશો તેમ તેમ તે એક ઉપયોગી સંદર્ભ બનશે.

તમામ લાઇફસાઇકલ હૂક્સ અને તેમના સંબંધિત ઉપયોગના કિસ્સાઓ વિશેની વિગતો માટે લાઇફસાઇકલ હૂક્સ API સંદર્ભલાઇફસાઇકલ હૂક્સ API સંદર્ભ નો સંપર્ક કરો.