@@ -1543,7 +1543,7 @@ declare module 'vue' {
1543
1543
1544
1544
通过结合 ` v- if ` 和 ` < KeepAlive> ` ,可以避免频繁销毁和重建组件,尤其是在切换视图或路由时。搭配 ` defineAsyncComponent` 实现懒加载,进一步减少初次加载的开销。
1545
1545
1546
- ` ` ` vue
1546
+ ` ` ` html
1547
1547
< template>
1548
1548
< div>
1549
1549
< button @click= " toggle" > Toggle View< / button>
@@ -1573,7 +1573,7 @@ const ViewB = defineAsyncComponent(() => import('./ViewB.vue'));
1573
1573
1574
1574
在路由进入前执行数据预取或条件检查,可以避免不必要的渲染和请求,提升页面加载效率。
1575
1575
1576
- ` ` ` vue
1576
+ ` ` ` html
1577
1577
< script>
1578
1578
import { defineComponent } from ' vue' ;
1579
1579
@@ -1608,7 +1608,7 @@ export default defineComponent({
1608
1608
1609
1609
避免将大型对象直接用 reactive 包裹,而是按需拆分,使用 ref 或 toRef 精细控制响应式范围,减少依赖追踪的开销。
1610
1610
1611
- ` ` ` vue
1611
+ ` ` ` html
1612
1612
< script setup>
1613
1613
import { ref , toRef , reactive } from ' vue' ;
1614
1614
@@ -1637,7 +1637,7 @@ const firstItem = toRef(largeData.items[0], 'value');
1637
1637
1638
1638
通过封装计算属性并结合 watchEffect,实现按需计算,避免不必要的开销。
1639
1639
1640
- ` ` ` vuw
1640
+ ` ` ` html
1641
1641
< script setup>
1642
1642
import { ref , computed , watchEffect } from ' vue' ;
1643
1643
@@ -1669,7 +1669,7 @@ watchEffect(() => {
1669
1669
1670
1670
v-memo 用于缓存模板子树,仅在依赖项变化时更新,常用于优化列表或静态内容。
1671
1671
1672
- ` ` ` vue
1672
+ ` ` ` html
1673
1673
< template>
1674
1674
< div v- for = " item in items" : key= " item.id" v- memo= " [item.updated]" >
1675
1675
{{ item .name }} - {{ expensiveComputation (item) }}
@@ -1694,7 +1694,7 @@ const expensiveComputation = (item) => {
1694
1694
1695
1695
通过在事件处理中引入节流(throttle)或防抖(debounce),减少高频事件的触发频率。
1696
1696
1697
- ` ` ` vue
1697
+ ` ` ` html
1698
1698
< script setup>
1699
1699
import { ref } from ' vue' ;
1700
1700
import { debounce } from ' lodash-es' ;
@@ -1723,7 +1723,7 @@ const handleInput = (e) => {
1723
1723
1724
1724
对于长列表(如包含数千条数据的列表),可以使用虚拟列表技术,只渲染可视区域内的元素,减少 DOM 节点数量。
1725
1725
1726
- ` ` ` vue
1726
+ ` ` ` html
1727
1727
< template>
1728
1728
< div class = " list-container" ref= " list" >
1729
1729
< div class = " list-viewport" : style= " { height: totalHeight + 'px' }" >
@@ -1795,7 +1795,7 @@ onUnmounted(() => {
1795
1795
1796
1796
通过动态导入(Dynamic Import)按需加载非关键资源(如图片、第三方库),可以减少初次加载的开销,提升首屏渲染速度。
1797
1797
1798
- ` ` ` vue
1798
+ ` ` ` html
1799
1799
< template>
1800
1800
< div>
1801
1801
< button @click= " loadChart" > Load Chart< / button>
@@ -1836,7 +1836,7 @@ const loadChart = async () => {
1836
1836
1837
1837
通过事件委托(Event Delegation)将事件监听器绑定到父元素,减少直接绑定到每个子元素的事件监听器数量,适合动态列表或大量元素场景。
1838
1838
1839
- ` ` ` vue
1839
+ ` ` ` html
1840
1840
< template>
1841
1841
< div class = " item-list" @click= " handleItemClick" >
1842
1842
< div
0 commit comments