Performance के Tips
छोटी habits, जैसे computed values, stable keys, और lazy loading इस्तेमाल करना, Vue apps को fast रखती हैं।
In this page:
Performance Tips
derived data के लिए methods से computed prefer करें, lists पर keys इस्तेमाल करें, shallowRef से huge read-only data पर deep reactivity से बचें, dynamic imports से routes split करें, और बहुत लंबी lists virtualize करें।
Static या कम बदलने वाले parts के लिए v-once और v-memo इस्तेमाल करें और optimize करने से पहले measure करें।
Note:
shallowRef और markRaw बड़े objects को deeply reactive बनने से बचाते हैं।
उदाहरण: Performance tips
<!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"><p>{{ status }}</p></div>
<script>
Vue.createApp({
setup() {
const big = Vue.shallowRef({ items: Array.from({ length: 1000 }, (_, i) => i) });
const deep = Vue.ref({ items: [1, 2, 3] });
const status = `shallow keeps ${big.value.items.length} raw items; deepProxy=${Vue.isReactive(deep.value)}, shallowProxy=${Vue.isReactive(big.value)}`;
console.log(status);
return { status };
},
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: shallow keeps 1000 raw items; deepProxy=true, shallowProxy=false
console: shallow keeps 1000 raw items; deepProxy=true, shallowProxy=false
-->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. #}
आम गलतियां
- huge data पर deep reactivity
- templates के अंदर heavy work
- measure करने से पहले optimize करना
चैप्टर सारांश
- Derived data के लिए computed इस्तेमाल करें
- Lists key करें और लंबी वालों को virtualize करें
- बड़े read-only data के लिए shallowRef
- Routes lazy load करें
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: