【Vue2】动态组件的使用-切换组件和keep-alive，以及异步组件

想实现切换不同列表展示不同数据

方法一

• 通过v-if判断逻辑。负责显示哪个
• 缺点：当有大量逻辑判断的时候不推荐

<template><div class="home"><div class="nev"><divclass="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>

方法二，动态组件

• 1.功能类似于tab组件，可用于组件的切换
• 2.is属性决定了component当前渲染的组件，is属性可以是组件或者是字符串，当是字符串时代表组件的注册名称或者是标签名
• 3.component动态组件上可以传任意参数和事件，且会被所有is上的当前组件所接收
• 简单的说，component就像一个容器，根据is属性来决定渲染什么组件，其他的没有什么区别

<template><div class="home"><div class="nev"><divclass="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>

动态组件的父组件如何传的值

<componentname="乞力马扎罗"@getClick="getClick":is="tabsIndex[nevindex]"
></component>//js中methods: {//子组件传的值getClick(e) {console.log(e);},},

动态组件的子组件如何接受传的值

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

认识keep-alive

• v-if切换这些，都会造成组件的销毁，会在这里监听到

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

• 缺点，数据的状态未保存
• 保持存活，用keep-alive包裹即可
• keep-alive有一些属性
• 1，include存放的name是组件自身的name属性，只有名称匹配的组件会被缓存
• 2，exclude，任何名称匹配的组件都不会被缓存
• 3，max，最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被缓存的实例会被销毁
• 以下是三种写法

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

缓存组件的生命周期

• 该组件内部

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

异步组件，单独打包，实现webpack分包，

如何对组件进行单独打包，目的缓解首页加载速度

解决方法 异步组件

• vue中，通过vue提供的函数，defineAsyncComponent
• import函数可以让webpack对导入文件进行分包处理
• 目的：是可以对其进行分包处理
• 步骤：

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

• npm run build

代码分包默认打包过程

• 默认情况下，构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么wbpack在打包时候就会将组件模块打包在一起
• 这个时候随着项目的不断变大，app.js文件的内容过大，会造成首屏的渲染速度变慢
• 打包时，代码的分包
• 对于一些不需要立即使用的组件，可以单独对他们进行拆分，拆分成一些小的代码块chunk.js
• 这些chuck.js会在需要时从服务器加载下来，并且运行代码