Skip to content

Commit 740b2b8

Browse files
authored
doc: update docs/vue.md (jaywcjlove#948)
1 parent 9eb9edd commit 740b2b8

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

Diff for: docs/vue.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -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>
15781578
import { defineComponent } from 'vue';
15791579
@@ -1608,7 +1608,7 @@ export default defineComponent({
16081608
16091609
避免将大型对象直接用 reactive 包裹,而是按需拆分,使用 ref 或 toRef 精细控制响应式范围,减少依赖追踪的开销。
16101610
1611-
```vue
1611+
```html
16121612
<script setup>
16131613
import { 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>
16421642
import { ref, computed, watchEffect } from 'vue';
16431643
@@ -1669,7 +1669,7 @@ watchEffect(() => {
16691669
16701670
v-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>
16991699
import { ref } from 'vue';
17001700
import { 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

Comments
 (0)