Vue面试题17：Vue中如何缓存组件、更新组件？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多；

• 思路

  • 1.缓存用keep-alive，阐述它的作用与用法；
  • 2.使用细节，例如缓存指定/排除、结合router-view和transition；
  • 3.组件缓存后更新可以利用activated或者beforeRouteEnter钩子；
  • 4.原理阐述；

• 回答范例

  • 1.开发中缓存组件使用keep-alive，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染：

  • <keep-alive>
      <component :is="tab"></component>
    </keep-alive>
    

  • 2.结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件；vue3中结合router-view时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive，通过 v-slot 在 RouterView 内部使用：

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

  • 3.缓存后如果要获取数据，解决方案可以有以下两种：

    • beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter：

    • beforeRouteEnter (to, from, next) {
        next(vm=>{
          console.log(vm)
          // 每次进入路由执行
          vm.getData()
        })
      }
      

    • activated：在keep-alive缓存的组件被激活的时候，都会执行activated钩子：

    • activated(){
        this.getData()
      }
      

  • 4.keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的VNode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行；