@@ -1543,7 +1543,7 @@ declare module 'vue' {
15431543
15441544通过结合 ` v- if ` 和 ` < KeepAlive> ` ,可以避免频繁销毁和重建组件,尤其是在切换视图或路由时。搭配 ` defineAsyncComponent` 实现懒加载,进一步减少初次加载的开销。
15451545
1546- ` ` ` vue
1546+ ` ` ` html
15471547< template>
15481548 < div>
15491549 < button @click= " toggle" > Toggle View< / button>
@@ -1573,7 +1573,7 @@ const ViewB = defineAsyncComponent(() => import('./ViewB.vue'));
15731573
15741574在路由进入前执行数据预取或条件检查,可以避免不必要的渲染和请求,提升页面加载效率。
15751575
1576- ` ` ` vue
1576+ ` ` ` html
15771577< script>
15781578import { defineComponent } from ' vue' ;
15791579
@@ -1608,7 +1608,7 @@ export default defineComponent({
16081608
16091609避免将大型对象直接用 reactive 包裹,而是按需拆分,使用 ref 或 toRef 精细控制响应式范围,减少依赖追踪的开销。
16101610
1611- ` ` ` vue
1611+ ` ` ` html
16121612< script setup>
16131613import { ref , toRef , reactive } from ' vue' ;
16141614
@@ -1637,7 +1637,7 @@ const firstItem = toRef(largeData.items[0], 'value');
16371637
16381638通过封装计算属性并结合 watchEffect,实现按需计算,避免不必要的开销。
16391639
1640- ` ` ` vuw
1640+ ` ` ` html
16411641< script setup>
16421642import { ref , computed , watchEffect } from ' vue' ;
16431643
@@ -1669,7 +1669,7 @@ watchEffect(() => {
16691669
16701670v-memo 用于缓存模板子树,仅在依赖项变化时更新,常用于优化列表或静态内容。
16711671
1672- ` ` ` vue
1672+ ` ` ` html
16731673< template>
16741674 < div v- for = " item in items" : key= " item.id" v- memo= " [item.updated]" >
16751675 {{ item .name }} - {{ expensiveComputation (item) }}
@@ -1694,7 +1694,7 @@ const expensiveComputation = (item) => {
16941694
16951695通过在事件处理中引入节流(throttle)或防抖(debounce),减少高频事件的触发频率。
16961696
1697- ` ` ` vue
1697+ ` ` ` html
16981698< script setup>
16991699import { ref } from ' vue' ;
17001700import { debounce } from ' lodash-es' ;
@@ -1723,7 +1723,7 @@ const handleInput = (e) => {
17231723
17241724对于长列表(如包含数千条数据的列表),可以使用虚拟列表技术,只渲染可视区域内的元素,减少 DOM 节点数量。
17251725
1726- ` ` ` vue
1726+ ` ` ` html
17271727< template>
17281728 < div class = " list-container" ref= " list" >
17291729 < div class = " list-viewport" : style= " { height: totalHeight + 'px' }" >
@@ -1795,7 +1795,7 @@ onUnmounted(() => {
17951795
17961796通过动态导入(Dynamic Import)按需加载非关键资源(如图片、第三方库),可以减少初次加载的开销,提升首屏渲染速度。
17971797
1798- ` ` ` vue
1798+ ` ` ` html
17991799< template>
18001800 < div>
18011801 < button @click= " loadChart" > Load Chart< / button>
@@ -1836,7 +1836,7 @@ const loadChart = async () => {
18361836
18371837通过事件委托(Event Delegation)将事件监听器绑定到父元素,减少直接绑定到每个子元素的事件监听器数量,适合动态列表或大量元素场景。
18381838
1839- ` ` ` vue
1839+ ` ` ` html
18401840< template>
18411841 < div class = " item-list" @click= " handleItemClick" >
18421842 < div
0 commit comments