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