Vue3最佳实践

批量清理副作用

effectScopt是Vue3官方推出的API，核心能力就是 批量捕获并管理作用域内创建的所有响应式副作用（包括 watch、watchEffect、computed等），可以通过一次 stop 调用统一停止所有副作用，专门解决大型应用中多副作用的繁琐管理、遗漏清理导致的内存泄漏问题。

异步组件

Vue3提供的 Suspense 内置组件，原生支持处理异步组件的加载状态，可通过 default 插槽渲染异步组件，fallback插槽渲染加载中的兜底内容，是Vue官方推荐的异步加载状态处理方案。

异步组件的核心设计目标就是 代码分割（Code Splitting），使用动态 import()引入的异步组件，在项目构建时会被打包工具（webpack/vite）拆分为独立的 chunk 文件，不会被打包到主 chunk 中，以此实现按需加载、减小首屏包体积的优化效果。

路由

路由参数解耦

Vue Router官方推荐通过路由配置的 props选项将路由参数传递给组件，核心优势是 实现路由与组件的解耦：

  1. 布尔模式：给路由配置：props: true，会自动将动态路由的 params 转为组件的 props，组件只需声明 props: ['id']即可直接使用，无需依赖 $route；
  2. 组件完全不感知路由的存在，复用性、可测试性大幅提升，是官方定义的最佳实践。

大数据列表渲染

精准渲染控制优化方案

v-memo是Vue3专门为大数据列表、复杂渲染场景推出的性能优化指令。

  1. 它会缓存指令所在的整个模板子树，仅当依赖数组 [items] 中的值发生变化时，才会重新渲染该子树；
  2. 这是Vue原生支持的、针对该场景最高效的优化方案，无需额外的手动控制和响应式开销。

diff 算法

  • Vue 的 diff 算法核心规则之一就是同层比较，不跨层级比较。只对比同一父节点下的同层级子节点。
  • Vue2 的核心 diff 算法是 双端diff算法，通过四个指针（新旧节点的头尾指针），循环从两端向中间收拢对比，大幅减少对比次数，提升 diff 效率。
  • 双端diff的四种核心命中规则：
    • 当 旧头节点<->新尾节点满足 sameVnode时，才会将该旧节点移动到 旧尾节点的下一个位置（真实DOM的末尾），而非start位置；
    • 只有当 旧尾节点<->新头节点满足 sameVnode时，才会将该旧节点移动到 旧头节点的前一个位置（真实DOM的开头）。