Պատմեք Vue.js-ում կոմպոնենտի կյանքի ցիկլի մասին։

Vue.js բաղադրիչի կյանքի ցիկլը հուշում է, որ այն ունի տարբեր հուկներ, որոնք կանչվում են նրա գոյության տարբեր փուլերում՝ ստեղծումից մինչև ոչնչացում:

Հիմնական հուկները՝

1. Ստեղծում:

   • beforeCreate: Բաղադրիչը ստեղծված է, բայց տվյալներն ու մեթոդները դեռ չեն սկսվել:
   • created: Բաղադրիչը ստեղծված է, տվյալներն ու մեթոդները սկսվել են, բայց DOM-ը դեռ չի նկարված:

2. Մոնտաժում:

   • beforeMount: Շաբլոնը կոմպիլացվել է, բայց բաղադրիչը դեռ չի տեղադրվել DOM-ում:
   • mounted: Բաղադրիչը տեղադրված է DOM-ում, կարող եք մուտք գործել DOM տարրերին $el-ի միջոցով:

3. Թարմացում:

   • beforeUpdate: Բաղադրիչի տվյալները փոխվել են, բայց DOM-ը դեռ չի թարմացվել:
   • updated: DOM-ը թարմացվել է տվյալների փոփոխությունից հետո:

4. Անջատում:

   • beforeUnmount: Բաղադրիչը պատրաստվում է հեռացվել DOM-ից:
   • unmounted: Բաղադրիչը հեռացվել է DOM-ից:

Բացի հիմնական հուկներից, կան հուկներ սխալների և դեբագի համար:

• renderTracked: Հետևում է ռեակտիվ կախվածություններին ռենդերի ժամանակ:
• renderTriggered: Կոչվում է, երբ անհրաժեշտ է կրկին ռենդեր անել ռեակտիվ վիճակի փոփոխությունից հետո:
• errorCaptured: Հավաքում է սխալները, որոնք առաջացել են երեխաների բաղադրիչներում:

// Օրինակ հուկների օգտագործման
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Բաղադրիչը ստեղծված է, տվյալներն ու մեթոդները դեռ հասանելի չեն.');
  },
  created() {
    console.log('created: Բաղադրիչը ստեղծված է, տվյալներն ու մեթոդները հասանելի են.');
    console.log('Message:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Շաբլոնը կոմպիլացվել է.');
  },
  mounted() {
    console.log('mounted: Բաղադրիչը տեղադրված է DOM-ում.');
    console.log('DOM տարր:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Տվյալները փոխվել են, բայց DOM-ը դեռ չի թարմացվել.');
  },
  updated() {
    console.log('updated: DOM-ը թարմացվել է.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Բաղադրիչը պատրաստվում է հեռացվել.');
  },
  unmounted() {
    console.log('unmounted: Բաղադրիչը հեռացվել է.');
  }
};