რა განსხვავებაა watch-სა და watchEffect-ის შორის?

Question

Accepted Answer

ორივე ასრულებენ გვერდითი ეფექტებს რეაქტიული ცვლილებების პასუხად, მაგრამ განსხვავდებიან დამოკიდებულებების დაზუსტების და მოწოდებული ინფორმაციის თვალსაზრისით. გამოიყენეთ გვერდითი ეფექტებისთვის (API ზარები, logging, ხელით DOM მუშაობა) — **არა** მნიშვნელობების წარმოშობისთვის (ეს `computed`). ## watch — ცხადი წყარო, იძლევა ძველ + ახალ მნიშვნელობებს ```vue ``` `watch` აკვირდება **კონკრეტულ** წყაროს, რომელსაც თქვენ დაასახელებთ, ეშვებს callback-ს მხოლოდ მაშინ, როდესაც ეს წყარო იცვლება, და იძლევა **ძველ და ახალ მნიშვნელობებს** — სასeful როდესაც საჭიროა მათი შედარება ან ერთი კონკრეტული მდგომარეობის ცვლილებაზე რეაგირება. ## watchEffect — ავტომატური დამოკიდებულების ტრეკინგი, მაშინვე ეშვება ```vue ``` `watchEffect` **ავტომატურად ტრეკინგ ჯობს** ყოველ რეაქტიულ მნიშვნელობას, რომელიც მის შიგნით გამოიყენება (წყაროთა სია არ აქვს), და მუშაობს **მაშინვე setup-ის დროს** (შემდეგ ხელახლა ეშვება დამოკიდებულების ცვლილებაზე). ძველი/ახალი მნიშვნელობები არ აქვს. ## გვერდიგვერდ ```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 ``` ## watch-ის სასeof ვარიანტები ```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 ``` ## რატომ არის მნიშვნელოვანი სწორი ხელსაწყოს არჩევა ინახავს რეაქტიულ გვერდით ეფექტებს სუფთას: გამოიყენეთ **`computed`** გამოშვებული მნიშვნელობებისთვის, **`watch`** როდესაც საჭიროა კონკრეტული წყაროზე რეაგირება ან ძველი/ახალი შედარება (მაგ. fetch როდესაც id იცვლება), და **`watchEffect`** ეფექტებისთვის, რომლებიც რამდენიმე მნიშვნელობაზეა დამოკიდებული და ავტომატურად უნდა ტრეკინგი გაიკეთოს. watcher-ის არასწორი გამოყენება გამოშვებისთვის (`computed`-ის ნაცვლად) საერთო anti-pattern-ია.