Kokia yra skirtis tarp watch ir watchEffect?

Question

Accepted Answer

Abu vykdo šalinius efektus reaguodami į reaktyvius pokyčius, tačiau skiriasi kaip nurodomos priklausomybės ir kokią informaciją jie teikia. Naudokite jums šalutinius efektus (API skambučiai, registravimas, rankinė DOM darbai) — **ne** reikšmėms išvesti (tai yra `computed`). ## watch — aiški šaltinis, suteikia senus + naujus reikšmes ```vue ``` `watch` stebėja **specifinį** šaltinį, kurį nurodote, vykdo grąžinimą tik kai šis šaltinis keičiasi, ir suteikia **senus ir naujus reikšmes** — naudinga, kai reikia juos palyginti arba reaguoti į tam tikrą būsenos dalį. ## watchEffect — automatinis priklausomybių sekimas, vykdomas iš karto ```vue ``` `watchEffect` **automatiškai seka** kiekvieną reaktyvią reikšmę, naudojamą viduje (nėra šaltinio sąrašo), ir vykdoma **iš karto sąrankos metu** (tada iš naujo vykdoma bet kurie priklausomybės pakeitimo metu). Nėra senų/naujų reikšmių. ## Greta ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## Naudingos watch parinktys ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## Kodėl tai svarbu Tinkamo įrankio pasirinkimas palaikalius reaktyvius šalinius efektus švarius: naudokite **`computed`** išvestoms reikšmėms, **`watch`** kai reikia reaguoti į specifinį šaltinį arba palyginti senus/naujus (pvz. atgabenti, kai id keičiasi), ir **`watchEffect`** efektams, kurie priklauso nuo kelių reikšmių ir jas turėtų sekti automatiškai. Naudoti watcher-ius išvedimui (vietoj `computed`) yra dažnas anti-šablonas.