Atributos y ciclo de vida de Keep-Alive

mantener viva

Uso de accesorios

• incluir-cadena o expresión regular. Solo se almacenarán en caché los componentes con nombres coincidentes.
• cadena de exclusión o expresión regular. Los componentes con nombres coincidentes no se almacenarán en caché.
• número máximo. El número máximo de instancias de componentes que se pueden almacenar en caché.

<keep-alive>Parcela los componentes dinámicos, las instancias de componentes se almacenan en caché inactivas, en lugar de destruirlas
cuando se cambia el componente, incluidos su ciclo de vida activatedy deactivatedlos dos correspondientes a la función de enlace se ejecutarán

Escenario de aplicación

主要用于保留组件状态或避免重新渲染。

<keep-alive include="test-keep-alive">
//将缓存name为test-keep-alive的组件
    <component></component>
</keep-alive>

<keep-alive include="a,b">
//将缓存name为a或者b的组件，结合动态组件使用
    <component :is="view"></component>
</keep-alive>

<keep-alive :include="/a|b/">
//使用正则表达式，需使用v-bind
    <component :is="view"></component>
</keep-alive>

<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

Usar con vista de enrutador

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router.js
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
    
    
        keepAlive: false // 不需要缓存
      }
    },
    {
    
    
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
    
    
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

Ciclo de vida de Keep-Alive

activated: Cuando se ingresa por primera vez a la página, el orden en el que se activan los ganchos escreated->mounted->activated->deactivated

Se activará deactivatedcuando la página salga , y solo cuando avance o retroceda nuevamente.activated