[Vue2] The use of dynamic components - switching components and keep-alive, and asynchronous components

Want to achieve switching between different lists to display different data

method one

• Judge the logic through v-if. responsible for displaying which
• Disadvantages: Not recommended when there are a lot of logical judgments

<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>

Method 2, dynamic components

• 1. The function is similar to the tab component, which can be used to switch components
• 2. The is attribute determines the component currently rendered by the component. The is attribute can be a component or a string. When it is a string, it represents the registered name or tag name of the component.
• 3. Any parameter and event can be uploaded to component dynamic components, and will be received by all current components on is
• Simply put, component is like a container, which component to render is determined according to the is attribute, and there is no difference in other

<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>

How to pass the value of the parent component of the dynamic component

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

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

How does the subcomponent of the dynamic component accept the passed value

<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>

Meet keep-alive

• v-if switching these will cause the destruction of the component, which will be monitored here

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

• Disadvantage, the state of the data is not saved
• Keep alive, wrap it with keep-alive
• keep-alive has some properties
• 1. The name stored in include is the name attribute of the component itself, and only components with matching names will be cached
• 2, exclude, any component with a matching name will not be cached
• 3, max, how many component instances can be cached at most, once this number is reached, the instance in the cache component that has not been cached recently will be destroyed
• The following are three ways of writing

//字符串
 <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>

The life cycle of the cache component

• Inside the component

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

Asynchronous components, packaged separately, realize webpack subpackage,

How to package components separately to ease the loading speed of the home page

Workaround Async Components

• In vue, through the function provided by vue, defineAsyncComponent
• The import function allows webpack to subpackage the imported files
• Purpose: It can be subcontracted
• step:

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

• npm run build

Code subpackage default packaging process

• By default, in the process of building the entire component tree, because components and components are directly dependent on modules, then wbpack will package the component modules together when packaging
• At this time, as the project continues to grow, the content of the app.js file is too large, which will cause the rendering speed of the first screen to slow down
• When packaging, the subpackage of the code
• For some components that do not need to be used immediately, they can be split separately and split into some small code blocks chunk.js
• These chuck.js will be loaded from the server when needed and run the code