watch ve watchEffect arasındaki fark nedir?

Question

Accepted Answer

Her ikisi de reaktif değişikliklere yanıt olarak yan etkileri çalıştırır, ancak bağımlılıkların nasıl belirtildiği ve size hangi bilgileri verdikleri konusunda farklılık gösterirler. Yan etkiler (API çağrıları, günlüğe kaydetme, manuel DOM çalışması) için bunları kullanın — değer türetmek için **değil** (bu `computed`). ## watch — açık kaynak, eski + yeni değerleri verir ```vue ``` `watch` **belirttiğiniz belirli** kaynağı izler, geri çağırma işlevini yalnızca bu kaynak değiştiğinde çalıştırır ve **eski ve yeni değerleri** sağlar — onları karşılaştırmanız veya durum parçasının belirli bir parçasına yanıt vermeniz gerektiğinde yararlıdır. ## watchEffect — otomatik bağımlılık izleme, hemen çalışır ```vue ``` `watchEffect` içinde kullanılan her reaktif değeri **otomatik olarak izler** (kaynak listesi yok) ve **kurulum sırasında hemen** çalışır (ardından herhangi bir bağımlılık değişikliğinde yeniden çalışır). Eski/yeni değer yok. ## Yan yana ```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 ``` ## Yararlı watch seçenekleri ```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 ``` ## Neden önemli Doğru aracı seçmek reaktif yan etkileri temiz tutar: türetilen değerler için **`computed`** kullanın, belirli bir kaynağa yanıt vermeniz veya eski/yeni değerleri karşılaştırmanız gerektiğinde **`watch`** kullanın (örneğin bir id değiştiğinde getirin) ve birden çok değere bağlı olan ve otomatik olarak izlenmesi gereken etkiler için **`watchEffect`** kullanın. Türetme için izleyicileri yanlış kullanmak (`computed` yerine) yaygın bir anti-modeldir.