Vue面试题24：你了解哪些Vue性能优化方法？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 答题思路：

  • 根据题目描述，这里主要探讨代码层面的优化；

• 回答范例：

  • 我这里主要从Vue代码编写层面说一些优化手段，例如：代码分割、服务端渲染、组件缓存、长列表优化等

  • 1.最常见的路由懒加载：有效拆分App尺寸，访问时才异步加载：通过vite或者webpack提供的动态加载方法import加载组件，打包时候就可以分包打包，这样就使得将来程序变得更小更快，我需要访问时才异步加载：

const router = createRouter({
  // 借助webpack的import实现异步组件
  routes: [{ path: "/foo", component: () => import("./Foo.vue") }],
})

• 2.keep-alive缓存页面：避免重复创建组件实例，且能保留缓存组件的状态，比如保留之前滚动条的位置：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component"></component>
  </keep-alive>
</router-view>

• 3.使用v-show复用DOM：避免重复创建组件：

<template>
  <div class="cell">
    <!-- ！—这种情况用v-show复用DOM，比v-if效果好 -->
    <div v-show="value" class="on">
      <Heavy :n="10000" />
    </div>
    <section v-show="!value" class="off">
      <Heavy :n="10000" />
    </section>
  </div>
</template>

• 4.v-for遍历避免同时使用v-if：实际上两者在Vue3与Vue2中的优先级不同，在Vue3中已经是个错误写法：

• 5.合适时机使用v-once和v-memo：

  • 如果有一个数据只显示一次，之后就不再变化了，那么可以使用v-once:

<!--single element-->
<span v-once>This will never change:{{ msg }}</span>
<!--the element have children-->
<div v-once>
  <h1>comment</h1>
  <p>{{ mss }}</p>
</div>
<!--component-->
<my-component v-once :comment="msg"></my-component>
<!--`v-for` directive-->
<ul>
  <li v-for="i in list" v-once>{{ i }}</li>
</ul>

• v-memo可以让我们按条件去跳过一些子树的更新，下面这个列表只会更新选中状态变化项：

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID:{{ item.id }} - selected:{{ item.id === selected }}</p>
  <p>……more child nodes</p>
</div>

• 6.长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染少部分可视区域的内容：

<recycle-scroller 
  class="items" 
  :items="items" 
  :item-size="24"
>
  <template v-slot="{ item }">
    <FetchItemView 
      :item="item" 
      @vote="voteItem(item)" 
    />
  </template>
</recycle-scroller>
//一些开源库：
//vue-virtual-scroller
//vue-virtual-scroll-grid

• 7.事件的销毁：Vue 组件销毁时，会自动解绑它的全部指令及监听器相关的事件，但是仅限于组件本身的事件。因此一些自定义事件是不会取消的，因此像定时器的监听需要在卸载前手动取消；

• 8.图片懒加载

  • 对于图片过多的页面，为了加速页面加载速度，很多时候我们需要将页面内未出现在可视区域的图片先不做加载，等到滚动到可视区域后再去加载：

<img v-lazy="/static/img/1.png">
//参考项目：vue-lazyload

• 9.第三方插件按需引入

  • 像element-plus这样的第三方组件库可以按需引入避免体积太大；

• 10.子组件分割策略：较重的状态组件适合拆分，相反：不宜过度拆分组件，尤其是为了所谓的组件抽象将一些不需要渲染的组件特意抽出来，因为组件实例的消耗远大于纯dom节点；

• 11.服务端渲染（SSR）/静态站点生成（SSG），这就属于同构开发层面了，如果存在首屏渲染速度过慢的问题可以考虑SSR、SSG方案；