Tabla de contenido
¿Cuáles son los ciclos de vida relacionados con el mantenimiento de vida?
prefacio
Al desarrollar un proyecto de Vue, la mayoría de los componentes no necesitan renderizarse varias veces, por lo que Vue proporciona una
El componente keep-alive integrado almacena en caché el estado interno del componente para evitar que se vuelva a procesar.
keep-alive es un componente abstracto: no representará un elemento DOM por sí mismo, ni aparecerá en la cadena de componentes principal;
Al envolver componentes dinámicos con keep-alive, las instancias de componentes inactivos se almacenan en caché en lugar de destruirse
componente dinámico
Múltiples componentes usan el mismo punto de montaje y cambian dinámicamente, lo cual es un componente dinámico
Castaño: complete una página de función de registro, 2 botones para cambiar, uno para completar la información de registro, uno para completar la información del perfil de usuario
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件-动态切换:</p>
<div style="border: 1px solid red;">
<component :is="comName"></component>
</div>
</div>
</template>
<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
data(){
return {
comName: "UserName"
}
},
components: {
UserName,
UserInfo
}
}
</script>
Conclusión: el componente incorporado de vue, con el atributo is, establezca el nombre del componente que se mostrará
expandir
es acerca de
1. Componentes dinámicos
componenteName puede ser el nombre del componente local y el nombre del componente global registrados en esta página, o puede ser un objeto de opción de un componente. Cuando cambia el nombre del componente de control, el componente seleccionado se puede cambiar dinámicamente.
2. Uso de es
Algunos elementos HTML, como <ul>, <ol>, <table> y <select>, tienen restricciones estrictas sobre qué elementos pueden aparecer dentro de ellos. Y algunos elementos HTML, como <li>, <tr> y <option>, solo pueden aparecer dentro de otros elementos específicos.
<ul>
<card-list></card-list>
</ul>
// 所以上面会被作为无效的内容提升到外部，并导致最终渲染结果出错。应该这么写：
<ul>
<li is="cardList"></li>
</ul>
caché de componentes
El cambio de componentes hará que los componentes se destruyan y se recreen con frecuencia, y el rendimiento no es alto
Usando el componente de mantenimiento de vida incorporado de Vue, el componente envuelto se puede mantener en la memoria sin ser destruido
Demostración 1: primero puede registrar eventos de ciclo de vida creados y destruidos para UserName.vue y UserInfo.vue, y observar el proceso de creación y destrucción
Demostración 2: use componentes de mantenimiento de vida integrados para permitir que los componentes dinámicos se almacenen en caché en lugar de destruirlos
<div style="border: 1px solid red;">
<!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
Aplicación en vue-router
<keep-alive : include="whiteList" : exclude="blackList">
<router-view></router-view>
</keep-alive>
include define la lista blanca de caché, y keep-alive almacenará en caché los componentes afectados;
excluir define la lista negra de caché, y los componentes de hit no se almacenarán en caché;
en muchos casos, también se puede usar con el atributo meta de la ruta
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->
Ciclo de vida complementario: los componentes almacenados en caché ya no se crean y destruyen, sino que se activan y desactivan
- activado - activado
- desactivado - desactivado
Conclusión: keep-alive puede mejorar el rendimiento de los componentes, las etiquetas dentro del paquete no se destruirán ni recrearán, y activarán métodos de ciclo de vida de activación e inactivación
expandir
¿Cuáles son los ciclos de vida relacionados con el mantenimiento de vida?
Función de ciclo de vida: En los componentes/rutas incluidos por keep-alive, habrá dos ganchos de ciclo de vida más: activado y desactivado.
-
activado
gancho activado : ** se llamará cuando el componente se represente por primera vez, y luego se llamará cada vez que se active el componente de caché.
Tiempo de llamada de enlace activado : ** Al ingresar a la ruta/componente en caché por primera vez, después de montar, se llama a la protección beforeRouteEnter antes de que la función de devolución de llamada pase al siguiente, y debido a que el componente está en caché, no se activará al ingresar al ruta o componente en caché nuevamente Estas funciones de enlace, beforeCreate creadas beforeMount montadas no se activarán
-
desactivado
gancho desactivado : **Se llama cuando el componente se desactiva (sale de la ruta).
Temporización de llamada de gancho desactivada : el uso de keep-alive no llamará antes de Destruir (el gancho antes de que se destruya el componente) y se destruirá (el componente se destruye), porque el componente no se destruye, se almacena en caché, este gancho se puede considerar como un sustituto para beforeDestroy, si almacena en caché Si desea hacer algo cuando se destruya el componente, puede colocarlo en este enlace. desactivado dejando el componente cache = > activado entra en el componente cache (si entras tambien en ruta cache)