[Vue2] El uso de componentes dinámicos: componentes de conmutación y componentes de mantenimiento de conexión y asincrónicos

Quiere lograr cambiar entre diferentes listas para mostrar diferentes datos

método uno

• Juzga la lógica a través de v-if. responsable de mostrar cuál
• Desventajas: No recomendado cuando hay muchos juicios lógicos.

<template>
  <div class="home">
    <div class="nev">
      <div
        class="nevbar"
        :class="nevindex == index ? 'newnev' : ''"
        v-for="(item, index) in tab"
        :key="index"
        @click="itemClick(index)"
      >
        {
    
    {
    
     item }}
      </div>
    </div>
    <one v-if="nevindex==0"></one>
    <two v-if="nevindex==1"></two>
    <three v-if="nevindex==2"></three>
  </div>
</template>

<script>
import one from "../components/one.vue";
import two from "../components/two.vue";
import three from "../components/three.vue";
export default {
    
    
  name: "HomeView",
  components: {
    
    
    one,
    two,
    three,
  },
  data() {
    
    
    return {
    
    
      tab: ["列表1", "列表2", "列表3"],
      nevindex: 0,
    };
  },
  methods: {
    
    
    // nev切换
    itemClick(index) {
    
    
      this.nevindex = index;
    },
  },
  created() {
    
    },
};
</script>
<style scoped lang="scss">
.nev {
    
    
  display: flex;
  justify-content: space-around;
}
.newnev {
    
    
  color: aqua;
}
</style>

Método 2, componentes dinámicos

• 1. La función es similar al componente de pestaña, que se puede usar para cambiar componentes.
• 2. El atributo is determina el componente actualmente representado por el componente. El atributo is puede ser un componente o una cadena. Cuando es una cadena, representa el nombre registrado o el nombre de etiqueta del componente.
• 3. Cualquier parámetro y evento se puede cargar en los componentes dinámicos del componente y será recibido por todos los componentes actuales en este momento.
• En pocas palabras, el componente es como un contenedor: qué componente representar se determina de acuerdo con el atributo is y no hay diferencia en otros.

<template>
  <div class="home">
    <div class="nev">
      <div
        class="nevbar"
        :class="nevindex == index ? 'newnev' : ''"
        v-for="(item, index) in tab"
        :key="index"
        @click="itemClick(index)"
      >
        {
    
    {
    
     item }}
      </div>
    </div>
    <div>
      <component :is="tabsIndex[nevindex]"></component>
    </div>
  </div>
</template>

<script>
import one from "../components/one.vue";
import two from "../components/two.vue";
import three from "../components/three.vue";
export default {
    
    
  name: "HomeView",
  components: {
    
    
    one,
    two,
    three,
  },
  data() {
    
    
    return {
    
    
      tab: ["列表1", "列表2", "列表3"],
      tabsIndex: ["one", "two", "three"],
      nevindex: 0,
      ISshow: "one",
    };
  },
  methods: {
    
    
    // nev切换
    itemClick(index) {
    
    
      this.nevindex = index;
    },
  },
  created() {
    
    },
};
</script>
<style scoped lang="scss">
.nev {
    
    
  display: flex;
  justify-content: space-around;
}
.newnev {
    
    
  color: aqua;
}
</style>

Cómo pasar el valor del componente principal del componente dinámico

<component
  name="乞力马扎罗"
  @getClick="getClick"
  :is="tabsIndex[nevindex]"
></component>

//js中
 methods: {
    
    
    //子组件传的值
    getClick(e) {
    
    
      console.log(e);
    },
  },

¿Cómo acepta el subcomponente del componente dinámico el valor pasado?

<template>
    <div>
        <h2>one页面{
    
    {
    
    name}}</h2>
        <button @click="handClick">子组件</button>
    </div>
</template>
<script>
export default {
    
    
    props:{
    
    
        name:{
    
    
            type:String,
            default:''
        }
    },
    methods:{
    
    
        handClick(){
    
    
            this.$emit('getClick',"接受到了子组件的值")
        },
    }
}
</script>

Conoce mantener vivo

• v-si cambiar estos causará la destrucción del componente, lo cual será monitoreado aquí

 //组件卸载
 unmounted(){
    
    
 },

• Desventaja, el estado de los datos no se guarda.
• Mantente vivo, envuélvelo con keep-alive
• keep-alive tiene algunas propiedades
• 1. El nombre almacenado en include es el atributo de nombre del componente en sí, y solo se almacenarán en caché los componentes con nombres coincidentes.
• 2, excluir, cualquier componente con un nombre coincidente no se almacenará en caché
• 3, máximo, cuántas instancias de componentes se pueden almacenar en caché como máximo. Una vez que se alcanza este número, la instancia en el componente de caché que no se ha almacenado en caché recientemente se destruirá
• Las siguientes son tres formas de escribir.

//字符串
 <keep-alive include="homeone,hometwo">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>
 //正则
 <keep-alive :include="/homeone|hometwo/">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>
 //数组
 <keep-alive :include="['homeone', 'hometwo']">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>

El ciclo de vida del componente de caché.

• Dentro del componente

//缓存组件的生命周期，进入活跃状态
   activated(){
    
    
     console.log("活跃")
   },
   //离开
   deactivated(){
    
    
     console.log("离开")
   }

Los componentes asincrónicos, empaquetados por separado, realizan un subpaquete de paquete web,

Cómo empaquetar componentes por separado para facilitar la velocidad de carga de la página de inicio

Solución alternativa de componentes asincrónicos

• En vue, a través de la función proporcionada por vue, definaAsyncComponent
• La función de importación permite que webpack subempaquete los archivos importados.
• Finalidad: Puede subcontratarse
• paso:

//异步组件
import {
    
    defineAsyncComponent} from 'vue'
//工厂函数写法，返回promise对象
const threevue=defineAsyncComponent(()=>import("../components/three.vue"))

• compilación de ejecución npm

Proceso de empaquetado predeterminado del subpaquete de código

• De forma predeterminada, en el proceso de construcción de todo el árbol de componentes, debido a que los componentes dependen directamente entre sí a través de la modularización, wbpack empaquetará los módulos de componentes juntos al empaquetar
• En este momento, a medida que el proyecto continúa creciendo, el contenido del archivo app.js es demasiado grande, lo que hará que la velocidad de renderizado de la primera pantalla se ralentice.
• Al empaquetar, el subpaquete del código.
• Para algunos componentes que no necesitan usarse inmediatamente, se pueden dividir por separado y dividir en algunos bloques de código pequeños, chunk.js.
• Estos chuck.js se cargarán desde el servidor cuando sea necesario y ejecutarán el código.