Ինչ է 'watch' և 'computed' Vue.js-ում և ինչպես են նրանք աշխատում?

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
Նպատակը	արձագանքել հատկության փոփոխությանը	հաշվարկել կախված տվյալները
Կեշավորում	ոչ	այո (կախվածություններից)
սպասարկում	ոչ	այո
վերադարձ արժեք	ոչ (կողմնակի ազդեցություն է գործում)	այո (վերադարձնում է հաշվարկված արժեքը)
Ասինխրոնություն	այո	ոչ
Սինտաքս	օբյեկտ ֆունկցիաներով-համագործողներով	օբյեկտ ֆունկցիաներով, որոնք վերադարձնում են արժեք