Vue.js-деги компоненттин өмүр циклы жөнүндө айтып бериңиз.

Vue.js компонентинин жашоо цикли — бул анын турмушунун ар кандай этаптарында чакырылуучу хукалардын топтому:

Негизги хуктар:

1. Жасалуу:

   • beforeCreate: Компонент түзүлдү, бирок маалыматтар жана ыкмалар дагы ишке киришкен жок.
   • created: Компонент түзүлдү, маалыматтар жана ыкмалар ишке киришкен, бирок DOM дагы эле чийилген жок.

2. Монтаждоо:

   • beforeMount: Шаблон компиляцияланган, бирок компонент дагы эле DOMго киргизилген жок.
   • mounted: Компонент DOMго киргизилди, $el аркылуу DOM элементтерине жетүүгө болот.

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: Компонент алынып салынды.');
  }
};