गहरे Watchers
एक deep watcher एक object या array के अंदर nested properties में changes notice करता है, सिर्फ तब नहीं जब यह replace हो।
In this page:
Syntax
export default {
watch: {
objectProperty: {
handler(newValue) {
// react to nested changes
},
deep: true
}
}
}Deep Watchers
Default से एक object watch करना Vue 3 options watchers में सिर्फ तभी fire होता है जब पूरे object पर reassign हो, इसलिए nested changes पर react करने के लिए deep: true add करें।
immediate option handler एक बार तुरंत चलाता है। Composition API के साथ, एक reactive object पर watch automatically deep है, जबकि एक object hold करने वाले एक ref को deep: true चाहिए।
Note:
बड़े structures deep watch करना costly है; जब हो सके specific paths watch करें।
उदाहरण: Deep watchers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="user.address.city = 'Paris'">Move</button>
<p>{{ user.address.city }} | changes: {{ changes }}</p>
</div>
<script>
Vue.createApp({
data() { return { user: { address: { city: "Rome" } }, changes: 0 }; },
watch: { user: { handler() { this.changes++; }, deep: true } },
}).mount("#app");
document.querySelector("button").click();
Vue.nextTick(() => console.log(document.querySelector("p").textContent));
</script>
</body>
</html>
<!-- Output:
Rendered: MoveParis | changes: 1
console: Paris | changes: 1
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- nested changes के लिए deep enable न करना
- huge objects deep watch करना
- mutated objects के लिए old और new values के अलग होने की उम्मीद करना
चैप्टर सारांश
- deep: true nested changes watch करता है
- immediate handler तुरंत चलाता है
- बड़े objects पर costly
- जब possible हो एक specific path watch करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: