logo

ELI5:Reaktivita ve Vue 3

Reaktivita. Je to populární módní slovo. Je to také jedna z nejpohodlnějších funkcí front-end frameworků.

Co to přesně je a jak to funguje ve Vue 3?

Předpoklady

  • Pracovní znalost základních objektů JavaScriptu a JS
  • Pracovní znalost základního Vue.js

Co je reaktivita?

Říkáme, že hodnota je reaktivní, když se může aktualizovat v reakci na změny hodnot, na kterých závisí. Na čem myslíme závisí?

Vezměme si příklad:

let val1 = 2
let val2 = 3
let sum = val1 + val2

Hodnota součtu je vždy určena hodnotami val1 a val2, takže říkáme, že součet závisí na hodnotách1 a val2.

Co se stane se součtem, když se změní jedna z hodnot, na kterých závisí? V běžném JavaScriptu to zůstává stejné. 

console.log(sum) // 5

val1 = 3

console.log(sum) // Still 5

Ale pokud byl součet reaktivní:

console.log(sum) // 5

val1 = 3

console.log(sum) // Sum is 6!

Hodnota součtu by se změnila v reakci na změnu hodnoty, na které závisela.

Co potřebuje Vue, aby byla hodnota reaktivní?

Vue potřebuje vědět:

  • jaké závislosti má tato hodnota.
  • když se tyto závislosti změní.

Vue také potřebuje být schopen přepočítat hodnoty, když se jejich závislosti změní.

Jak Vue pozná, když se změní závislosti

Vue obaluje datový objekt všech komponent pomocí ES6 Proxy.
Proxy je objekt, který obaluje cílový objekt.

To je důležité, protože všechny reaktivní hodnoty závisí (přímo nebo ne) na vlastnostech v datovém objektu komponenty.

Proxy umožňují zachytit všechny požadavky na získání nebo nastavení vlastností cíle. Umožňují vám také spustit libovolný kód v reakci na tyto požadavky.

Díky tomu, když se kód pokusí změnit jednu z vlastností datového objektu, Vue jej zachytí a je si toho vědom.

Vue pak může přepočítat všechny funkce, které na této hodnotě závisí. Jak ale Vue ví, které funkce závisí na kterých hodnotách?

Jak Vue ví, které závislosti patří k hodnotě

Aby naše hodnota byla reaktivní, musíme ji zabalit do funkce. Opět použijte součet pro ilustraci:

// we need to go from

let val1 = 2
let val2 = 3
let sum = val1 + val2

// to

const updateSum = () => {
 sum = val1 + val2
}

Vue pak všechny takové funkce obalí efektem. Efekt je funkce, která má jinou funkci jako argument. Vue pak místo této funkce zavolá efekt.

Když Vue vyvolá efekt, efekt:

  • Zaznamenává, že je spuštěn.
  • Volá funkci, kterou obdržela jako argument.
  • Po skončení funkce se odstraní ze seznamu spuštěných efektů.

Pamatujete si, že všechny zdrojové hodnoty pocházejí z Proxy (datová komponenta)? Při provádění funkce, kterou zalamuje, bude efekt potřebovat vlastnost z datového objektu a pokusit se ji přečíst.

Proxy zachytí tento požadavek na čtení. Vue kontroluje, který efekt právě běží. Poté zaznamená, že účinek závisí na vlastnosti, kterou se pokusil přečíst. Takto Vue ví, které hodnoty závisí na kterých vlastnostech.

Jak tedy Vue ví, kdy znovu spustit funkce, které vracejí závislé hodnoty?

Odpovědí je opět kouzlo Proxies. Proxy mohou také zachytit požadavky na nastavení hodnot vlastností.

Pamatujte, že nyní máme záznam efektů a také hodnot, na kterých závisí. Když se změní hodnota vlastnosti v datech, Vue musí udělat jednu věc:zkontrolovat záznam a aktualizovat zdrojovou hodnotu.

Vue pak může znovu spustit všechny efekty, které na něm závisí, a aktualizovat tak hodnoty.

Závěr

Tento článek je zjednodušeným přehledem toho, jak funguje reaktivita ve Vue 3. Pokud byste si chtěli na toto téma přečíst více, zde jsou některé zdroje:

  • Pochopení nového systému reaktivity ve Vue 3

  • Reaktivita v hloubce