前端

keep-alive缓存无效,原因是与vue2写法不同,vue3应该使用插槽的形式,让keep-alive包裹插槽, 使用keep-alive还会出现一个问题,就是多路由使用同一个组件,最终几个路由打开的页面渲染的参数是一致的.也就是说在打开新的路由时,并不会重新挂载该组件,而是对组件进行了复用. 此时就要用到route-view的key属性,改属性作为组件的唯一标识,如果同组件不同key,则会重新初始化挂载一个新的组件. 这里要注意的是如果router-view使用的是插槽模式,key要绑定在component标签内,如果绑在router-view内,每次返回组件都会被重新挂载,导致缓存失效.

<router-view v-slot="{ Component }" >
    <transition mode="out-in" :name="theme.showPageTransition ? 'fade-transform' : 'no-transform'">
      <!-- include 缓存白名单 -->
      <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
        <component :is="Component" :key="routerKey" ref="componentRef" />
      </keep-alive>
    </transition>
 </router-view>

回答:当data是个函数的时候,组件实例化的时候会调用这data函数,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个地址,应为内存地址不同,所以每个组件中的数据不会互相干扰。保证了组件的独立性和可复用性。