watch ਅਤੇ watchEffect ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

Question

Accepted Answer

ਦੋਵੇਂ reactive ਤਬਦੀਲੀਆਂ ਦੇ ਜਵਾਬ ਵਿੱਚ side effects ਚਲਾਉਂਦੇ ਹਨ, ਪਰ ਉਹ ਇਸ ਵਿੱਚ ਵੱਖਰੇ ਹਨ ਕਿ ਨਿਰਭਰਤਾਵਾਂ ਕਿਵੇਂ ਨਿਰਧਾਰਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਅਤੇ ਉਹ ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਕਾਰੀ ਦਿੰਦੇ ਹਨ। ਉਹਨਾਂ ਨੂੰ side effects ਲਈ ਵਰਤੋ (API ਕਾਲ, logging, ਦਸਤੀ DOM ਕਾਰਜ) — **ਨਹੀਂ** ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ (ਇਹ `computed` ਲਈ ਹੈ)। ## watch — ਸਪਸ਼ਟ ਸਰੋਤ, ਪੁਰਾਣੇ + ਨਵੇਂ ਮੁੱਲ ਦਿੰਦਾ ਹੈ ```vue ``` `watch` ਇੱਕ **ਖਾਸ** ਸਰੋਤ ਨੂੰ ਦੇਖਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਨਾਮ ਕਰਦੇ ਹੋ, callback ਸਿਰਫ਼ ਉਦੋਂ ਚਲਾਉਂਦਾ ਹੈ ਜਦੋਂ ਉਹ ਸਰੋਤ ਬਦਲਦਾ ਹੈ, ਅਤੇ **ਪੁਰਾਣੇ ਅਤੇ ਨਵੇਂ ਮੁੱਲ** ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ — ਉਪਯੋਗੀ ਜਦੋਂ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦਾ ਤੁਲਨਾ ਕਰਨੀ ਹੋ ਜਾਂ ਰਾਜ ਦੇ ਇੱਕ ਖਾਸ ਹਿੱਸੇ ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਹੋ। ## watchEffect — ਸਵਯੰਚਲਿਤ ਨਿਰਭਰਤਾ ਟ੍ਰੈਕਿੰਗ, ਤੁਰੰਤ ਚਲਾਉਂਦਾ ਹੈ ```vue ``` `watchEffect` **ਸਵਯੰਚਲਿਤ ਤੌਰ 'ਤੇ** ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ ਹਰ reactive ਮੁੱਲ ਜੋ ਇਸ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ (ਕੋਈ ਸਰੋਤ ਸੂਚੀ ਨਹੀਂ), ਅਤੇ **ਤੁਰੰਤ ਸੈਟਅੱਪ 'ਤੇ** ਚਲਾਉਂਦਾ ਹੈ (ਫਿਰ ਕਿਸੇ ਵੀ ਨਿਰਭਰਤਾ ਪਰਿਵਰਤਨ 'ਤੇ ਦੋਬਾਰਾ ਚਲਾਉਂਦਾ ਹੈ)। ਕੋਈ ਪੁਰਾਣੇ/ਨਵੇਂ ਮੁੱਲ ਨਹੀਂ। ## ਪਾਸੇ-ਦਰ-ਪਾਸੇ ```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 ਵਿਕਲਪ ```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 ``` ## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਸਹੀ ਟੂਲ ਚੁਣਨਾ reactive side effects ਨੂੰ ਸਾਫ਼ ਰੱਖਦਾ ਹੈ: **`computed`** ਵਿੱਤਕਰਿਤ ਮੁੱਲਾਂ ਲਈ, **`watch`** ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਖਾਸ ਸਰੋਤ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਹੋ ਜਾਂ ਪੁਰਾਣੇ/ਨਵੇਂ ਦਾ ਤੁਲਨਾ ਕਰਨੀ ਹੋ (ਜਿਵੇਂ id ਬਦਲ ਜਾਣ 'ਤੇ fetch ਕਰਨਾ), ਅਤੇ **`watchEffect`** ਪ੍ਰਭਾਵਾਂ ਲਈ ਜੋ ਕਈ ਮੁੱਲਾਂ 'ਤੇ ਨਿਰਭਰ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਵਯੰਚਲਿਤ ਤੌਰ 'ਤੇ ਟ੍ਰੈਕ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ। ਵਿਤਕਰਿਆ ਲਈ watchers ਦੀ ਗਲਤ ਵਰਤੋਂ (`computed` ਦੀ ਬਜਾਏ) ਇੱਕ ਆਮ ਐਂਟੀ-ਪੈਟਰਨ ਹੈ।