Comprender el mantenimiento de vida

entender

definición:

Es un componente incorporado. Cuando envuelve componentes dinámicos, almacenará en caché las instancias de componentes inactivos en lugar de destruirlos.
Keep-alive es un componente abstracto. No se representará como un elemento dom, ni aparecerá en el padre. cadena de componentes

efecto

Si el componente está en un estado de caché, evite la reproducción repetida de dom, reduzca el tiempo de carga y el consumo de rendimiento, y mejore la experiencia del usuario

principio

Cuando se llame a la función creada, guarde el nodo VNode [dom virtual] que debe almacenarse en caché en this.cache / when rendering (page rendering), si el nombre del VNode cumple con las condiciones de la memoria caché (se puede controlar mediante incluir y excluir ), será de este Retire la instancia de VNode previamente almacenada en caché de .cache para renderizar

usar

parámetro

nombre del parámetro	valor	describir
incluir	cadena o expresión regular	Solo se almacenarán en caché los componentes con nombres coincidentes
excluir	cadena o expresión regular	Cualquier componente cuyo nombre coincida no se almacenará en caché
máximo	número	Cuántas instancias de componentes se pueden almacenar en caché como máximo

Nota: el valor de inclusión/exclusión es el nombre del componente, no el nombre del componente de enrutamiento.

// router.js
{
    
    
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{
    
     
  path: '/about',
  name: 'about',
  component: () => import('../views/about.vue')
},

//首先声明只有两个页面分别是:home页面和about页面
// App.vue

//所有组件都要缓存【情况一】
<keep-alive>
   <router-view/>
</keep-alive>

//如果只缓存about内容【情况二】
<keep-alive include="about">
   <router-view/>
</keep-alive>

//如果不缓存about内容【情况三】
<keep-alive exclude="about">
   <router-view/>
</keep-alive>

----------------------------------------------------------------------------------------------------------------
补充： include/exclude 值的多种形式。

// 1. 将缓存 name 为 test 的组件(基本）
<keep-alive include='about'>
  <router-view/>
</keep-alive>
	
// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
<keep-alive include='a,b'>
  <router-view/>
</keep-alive>
	
// 3. 使用正则表达式，需使用 v-bind
<keep-alive :include='/a|b/'>
  <router-view/>
</keep-alive>	
	
// 4.动态判断
<keep-alive :include='includedComponents'>
  <router-view/>
</keep-alive>
	
// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='home'>
  <router-view/>
</keep-alive>

// 6. 和 `<transition>` 一起使用
<transition>
  <keep-alive>
    <router-view/>
  </keep-alive>
</transition>

// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

// 关于页about.vue
<template>
  <div class="about">
    <h2>关于页</h2>
    <p @click="pClick">这是一个p标签</p>
  </div>
</template>
<script>
export default{
    
    
  name: 'AboutView',
  components: {
    
    

  },
  methods: {
    
    
    pClick(e) {
    
    
      console.log(e.target.style.color = 'red');
      console.log('p标签被点击了')
    }
  },
  created() {
    
    
    console.log('AboutView created')
  },
  destroyed() {
    
    
    console.log('AboutView destroyed')
  },
}
</script>

//首页home.vue
<template>
  <div class="home">
    <h2>首页</h2>
  </div>
</template>

<script>


export default {
    
    
  name: 'HomeView',
  components: {
    
    

  },
  created() {
    
    
    console.log('HomeView created')
  },
  destroyed() {
    
    
    console.log('HomeView destroyed')
  },
}
</script>

Entonces en este momento, si es el caso 1, todos los componentes están en caché,
si es el caso 2, solo puede ver que el contenido de la etiqueta p en el componente about está en caché, es decir, al cambiar entre home y sobre el contenido, si el caché sobre
está en el caso tres, entonces es el componente de inicio almacenado en caché

Además, hay otra forma de almacenar en caché
usando el atributo meta en la ruta para controlar si se requiere almacenamiento en caché

Agregue el atributo KeepAlive al meta en la ruta about a true, lo que indica que la ruta actual debe almacenarse en caché

// router.js
{
    
    
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{
    
     
  path: '/about',
  name: 'about',
  meta:{
    
    
    keepAlive:true
  },
  component: () => import('../views/about.vue')
},

El código keep-alive se puede envolver en combinación con v-if, si el keepAlive en el metadato es verdadero, se almacenará en caché; de lo contrario, no se almacenará en caché.

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

Luego, en el desarrollo real, podemos matar de hambre y enrutar a los guardias para implementar el almacenamiento en caché que requiere componentes de almacenamiento en caché.

export default {
    
    
  beforeRouteLeave(to, from, next) {
    
    
    to.meta.keepAlive = true;
    next();
  }
}
</script>

Luego, cuando se usa el caché de ruta, se debe usar el gancho del ciclo de vida, así que introduzcamos la función del gancho del ciclo de vida relacionada con él.

nombre	describir
activado	Se llama cuando se activa el componente keep-alive, esta función de enlace no se llama durante la representación del lado del servidor
desactivado	Llamada cuando el componente de mantenimiento de vida está desactivado, la función de enlace no se llama durante la representación del lado del servidor

Explicación
El uso mantendrá los datos en la memoria. Si desea obtener los datos más recientes cada vez que ingrese a la página, debe obtener los datos en la fase activa y emprender la tarea de obtener los datos en el gancho original creado.
Dos ganchos de ciclo de vida: activado y desactivado

activado: llamado cuando se activa el componente, también se llamará cuando el componente se renderice por primera vez, y luego se llamará cada vez que se active keep-alive desactivado
: llamado cuando se desactive el componente

Nota:
estos dos ciclos de vida se llamarán solo cuando el componente esté envuelto por keep-alive. Si se usa como un componente normal, no se llamará. Después de la versión 2.1.0, después de usar excluir para excluir, incluso si está envuelto en Keep-alive, ¡estos dos ganchos aún no se llamarán! Además, este enlace no se llamará cuando se renderice en el lado del servidor.

¿Cuándo obtener los datos?

Cuando se introduce keep-alive, la página ingresa por primera vez, la secuencia de activación de ganchos:
created==>mounted==》activated,
deactivated se activa al salir
y activado se activa al volver a entrar

Sabemos que después de mantener vivo, la plantilla de página se inicializa y se analiza en fragmentos HTML por primera vez, y los datos en la memoria no se volverán a analizar cuando se ingresen nuevamente.
Use VirtualDOM para actualizaciones de diferencias solo cuando cambien los datos. Por lo tanto, la adquisición de datos de entrada de página también debe colocarse en activada.
Después de descargar los datos, la parte de operar manualmente el DOM también debe ejecutarse en activado para que surta efecto.

Por lo tanto, debe dejar una copia del código de adquisición de datos en activado, o transferir directamente el código creado a activado sin la parte creada.

Aplicación práctica:
si no se usa el componente de mantenimiento de vida, la página se representará honestamente cuando la página retroceda, activando el gancho creado y la experiencia del usuario no es buena

Los principales escenarios de uso son: hay una relación de varios niveles en el menú [Página de inicio-"Página de lista-"Página de detalles]

Al saltar a la página de lista desde la página de inicio, el componente de la página de lista se vuelve a representar;
al regresar a la página de lista desde la página de detalles, el componente de lista almacena en caché y no vuelve a solicitar datos

// app.vue
<template>
  <div id="app">
    <keep-alive :include="keepAliveInclude">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
import {
    
     mapGetters } from 'vuex'
export default {
    
    
  name:'home',
  computed:{
    
    
    ...mapGetters([
      'keepAliveInclude',
    ])
  },
}
</script>

Guarde la actualización de estado de keepAliveInclude en la tienda

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    // keepAlive缓存组件
    keepAliveInclude:[],
  },
  getters:{
    
    
    keepAliveInclude: state => state.keepAliveInclude,
  },
  mutations: {
    
    
    SET_KEEPALIVEINCLUDE:(state, keepAliveInclude) => {
    
    
      state.keepAliveInclude = keepAliveInclude;
    }
  },
  actions: {
    
    
    setKeepAliveInclude({
     
      commit }, keepAliveInclude){
    
    
      commit("SET_KEEPALIVEINCLUDE", keepAliveInclude)
    },
  },
})

Lista de páginas que deben almacenarse en caché.vue

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goDetail">详情</button>
    列表: <input type="text" v-model="inputVal">
  </div>
</template>

<script>
export default {
    
    
  name:'list',
  data(){
    
    
    return {
    
    
      inputVal:'',
    }
  },
  methods:{
    
    
    goDetail(){
    
    
      this.$router.push('./detail')
    },
    goHome(){
    
    
      this.$router.push('./home')
    }
  },
  beforeRouteLeave (to, from, next) {
    
    
    if(to.name == 'detail'){
    
    
      this.$store.dispatch('setKeepAliveInclude',['list'])
    }else{
    
    
      this.$store.dispatch('setKeepAliveInclude',[])
    }
    // next();
    setTimeout(() => {
    
     next(); }, 10); // next()需用定时器包裹，否则多次切换无法缓存
  }
}
</script>