Vue.js'te 'watch' жана 'computed' эмне жана алар кандай иштейт?

watch (байкоочу)

• Белгилүү бир реактивдүү мүнөздүн өзгөрүшүнө реакция кылуу үчүн колдонулат.
• Асинхрондук операцияларды аткарууга, аткарууну кечиктирүүгө же кыйынчылык эсептөөлөрдү жүргүзүүгө мүмкүндүк берет, мүнөздүн мааниси өзгөргөндө.
• Компоненттин ичинде watch опциясы аркылуу конфигурацияланат.
• handler (жооп берүүчү функция), deep (терең көзөмөлдөө) жана immediate (компонент түзүлгөндө аткаруу) параметрлери болушу мүмкүн.

Мисал:

watch: {
  // `firstName` мүнөзүнүн өзгөрүшүн көзөмөлдөө
  firstName(newValue, oldValue) {
    console.log(`Аты ${oldValue}дан ${newValue}га өзгөрдү`);
  },
  // `userInfo` объектисин терең көзөмөлдөө
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Колдонуучу тууралуу маалымат өзгөрдү.');
    },
    deep: true
  }
}

computed (эсептелүүчү мүнөздөр)

• Башка маалыматтарга көз каранды болгон реактивдүү маалыматтарды декларативдүү түзүү үчүн колдонулат.
• Натыйжа кэштелет, анын реактивдүү көз карандылары өзгөргөнчө.
• Кечиккен, гана ага кайрылганда эсептелет.
• Компоненттин ичинде computed опциясы аркылуу конфигурацияланат.
• Маанилүү маанини кайтаруу керек.

Мисал:

computed: {
  // `firstName` жана `lastName` негизинде толук атын эсептөө
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Колдонуучулардын тизмесин фильтрлөө
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

негизги айырмачылыктар

белгилөө	watch	computed
Максат	мүнөздүн өзгөрүшүнө реакция кылуу	көз каранды маалыматтарды эсептөө
Кэш	жок	оюндун негизинде (зависимосторго)
Кечиккендик	жок	оюндун негизинде (зависимосторго)
Кайтаруу мааниси	жок (жакшы жыйынтыкка алып келет)	оюндун негизинде (баалуу маанини кайтарат)
Асинхрондук	ооба	жок
Синтаксис	функциялар менен объекттер	маанини кайтарган функциялар менен объекттер

computed колдонуп, башка маалыматтардан алынган реактивдүү маалыматтарды алыңыз. watch колдонуп, реактивдүү мүнөздүн мааниси өзгөргөндө, API чакыруулар сыяктуу, же DOM өзгөрүүлөрү сыяктуу, жанама таасирлерди аткарыңыз, же башка логикалык реакцияларды жүргүзүңүз.