Sobes.tech
Middle

'watch' ва 'computed' дар Vue.js чист ва онҳо чӣ гуна кор мекунанд?

sobes.tech AI

Ҷавоб аз AI

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), вақте ки арзиши хосияти реактивӣ тағйир меёбад, ё барои иҷрои реаксияҳои мураккаб.