v-once/v-memo का उपयोग
v-once एक element को एक बार render करता है और v-memo चुनी हुई values बदलने तक एक subtree re-render करना skip करता है।
In this page:
Syntax
<p v-once>{{ rendered_once }}</p>
<div v-memo="[dependency]">{{ content }}</div>v-once/v-memo
v-once Vue को बताता है कि एक element और इसके children को एक बार render करे और बाद में इन्हें static treat करे। v-memo dependencies का एक array लेता है और सिर्फ तभी re-render करता है जब एक बदले, जो huge lists में मदद करता है।
दोनों measure करने के बाद sparingly इस्तेमाल करने वाले optimizations हैं।
Note:
एक empty array वाला v-memo v-once जैसा behave करता है।
उदाहरण: v-once/v-memo
<!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="n++">n = {{ n }}</button>
<p v-once>Rendered once: {{ n }}</p>
<p>Live: {{ n }}</p>
<p v-memo="[n > 1]">Memo (changes only when n > 1 flips): {{ n }}</p>
</div>
<script>
Vue.createApp({ data() { return { n: 1 }; } }).mount("#app");
document.querySelector("button").click();
Vue.nextTick(() => console.log([...document.querySelectorAll("p")].map((p) => p.textContent).join(" | ")));
</script>
</body>
</html>
<!-- Output:
Rendered: n = 2Rendered once: 1Live: 2Memo (changes only when n > 1 flips): 2
console: Rendered once: 1 | Live: 2 | Memo (changes only when n > 1 flips): 2
-->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. #}
आम गलतियां
- ऐसे content पर v-once इस्तेमाल करना जिसे update होना ज़रूरी हो
- हर जगह v-memo overuse करना
- Wrong dependency arrays UI freeze कर देते हैं
चैप्टर सारांश
- v-once एक बार render करता है
- v-memo dependency बदलने पर re-render करता है
- बड़ी lists के लिए useful
- इस्तेमाल करने से पहले measure करें
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: