Vue3 实用技巧

跨层级传值：provide 与 inject

在深层嵌套组件中，避免通过 props 逐层传递数据，使用 provide/inject 实现"直通式"数据共享：

// 父组件
import { provide } from 'vue'; 
export default { 
    setup() { provide('theme', 'dark'); } 
}; 
// 子组件（任意层级）
import { inject } from 'vue';
export default { 
    setup() { 
        const theme = inject('theme'); // ✅ 获取父组件提供的值 } 
    };

组件传送门：Teleport

解决弹窗、下拉菜单等组件被父级样式覆盖的问题，通过 Teleport 将组件渲染到指定 DOM 节点（如 body）：

<template>
    <button @click="showModal = true">打开弹窗</button> 
    <Teleport to="body">
        <div v-if="showModal" class="modal">
            <h3>重要通知</h3>
            <p>内容不受父级样式限制</p>
        </div> 
    </Teleport>
</template>

优势：彻底摆脱 DOM 层级嵌套限制，简化样式管理。

优化

列表渲染优化：v-memo

对长列表或动态表格，使用 v-memo 缓存渲染结果，仅当依赖项变化时重新渲染：

<ul> 
    <li v-for="item in list" :key="item.id" v-memo="[item.id, item.status]">
        {{ item.name }} - {{ item.status }}
    </li>
</ul>

效果：减少无效更新，提升滚动流畅度。

虚拟滚动：vue-virtual-scroller

对于超长列表（如 1000+ 条数据），使用虚拟滚动库仅渲染可视区域内的元素，大幅降低 DOM 节点数：

<template>
    <VirtualScroller :items="list" :item-size="50">
        <template v-slot="{ item }">
            <div>{{ item.name }}</div>
        </template>
    </VirtualScroller>
</template>

性能提升：从渲染 1000 个 DOM 节点降至渲染 10-20 个。

列表渲染 key 选择策略

• 使用 index 作为 key：仅适用于无状态、不增删的列表（如分页展示）。
• 使用唯一 id 作为 key：适用于大多数场景，确保精准更新。
• 动态生成 key ：当数据无唯一标识时，可使用 Symbol() 或 uuid：

const list = ref([ 
    { id: Symbol(), name: '项目A' }, 
    { id: Symbol(), name: '项目B' } 
]);