watch અને watchEffect વચ્ચે શું તફાવત છે?

Question

Accepted Answer

બંને પ્રતિક્રિયાશીલ ફેરફારોના જવાબમાં બાજુની અસરો ચલાવે છે, પરંતુ તેઓ નિર્ભરતાઓ કેવી રીતે સ્પષ્ટ કરવામાં આવે છે અને તેઓ તમને શું માહિતી આપે છે તેમાં તફાવત છે. તેમને બાજુની અસરો (API કૉલ્સ, લૉગિંગ, મેનુયુઅલ DOM કાર્ય) માટે વાપરો — **કાયમતઃ** મૂલ્યો મેળવવા માટે નહીં (તે `computed` છે). ## watch — સ્પષ્ટ સ્રોત, જૂની અને નવી મૂલ્યો આપે છે ```vue ``` `watch` એક **ચોક્કસ** સ્રોતને જુએ છે જે તમે નામ આપો છો, કૉલબેક માત્ર ત્યારે જ ચલાવે છે જ્યારે તે સ્રોત બદલાય છે, અને **જૂની અને નવી મૂલ્યો** આપે છે — ઉપયોગી જ્યારે તમે તેમને સરખાવવાની જરૂર હોય અથવા રાજ્યના એક ચોક્કસ ભાગમાં પ્રતિક્રિયા આપવાની જરૂર હોય. ## watchEffect — સ્વયંચલિત નિર્ભરતા ટ્રેકિંગ, તરત જ ચલાવે છે ```vue ``` `watchEffect` આપોઆપ તેની અંદર ઉપયોગ કરવામાં આવેલ દરેક પ્રતિક્રિયાશીલ મૂલ્યને **ટ્રેક કરે છે** (કોઈ સ્રોત સૂચી નહીં), અને **સેટअપ પર તરત જ ચલાવે છે** (પછી કોઈ પણ નિર્ભરતા ફેરફાર પર પુનઃ-ચલાવે છે). જૂની/નવી મૂલ્યો નહીં. ## બાજુ બાજુ ```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 ``` ## શા માટે તેનું મહત્વ છે સાચું સાધન પસંદ કરવાથી પ્રતિક્રિયાશીલ બાજુની અસરો સ્વચ્છ રહે છે: મેળવેલ મૂલ્યો માટે **`computed`** વાપરો, ચોક્કસ સ્રોતમાં પ્રતિક્રિયા આપવા અથવા જૂની/નવી તુલના કરવા માટે **`watch`** વાપરો (દા.ત. આધારિત હોય તો લાવો), અને અસરો માટે **`watchEffect`** વાપરો જે બહુ મૂલ્યો પર આધાર રાખે છે અને તેમને સ્વયંચલિત રીતે ટ્રેક કરવો જોઈએ. מזוקק માટે પાણીને મોટો-પેટર્ન `computed` ને બદલે વાપરવું એક સામાન્ય એન્ટી-પેટર્ન છે.