1. 什么是动态组件
动态组件指的是 动态切换组件的显示与隐藏
2. 如何实现动态组件渲染
vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。
- 作用：组件的占位符
- is的值表示要渲染的组件
示例代码如下：
Left.vue的代码
<template>
<div class="box">这是左边的组件</div>
</template>
<script>
export default {
name: "Left",
};
</script>
<style lang="less" scoped>
.box {
background-color: pink;
border: 1px solid;
height: 400px;
width: 400px;
color: white;
}
</style>
Right.vue的代码
<template>
<div class="box">这是右边的组件</div>
</template>
<script>
export default {
name: "Right",
};
</script>
<style lang="less" scoped>
.box {
background-color: blue;
border: 1px solid;
height: 400px;
width: 400px;
color: white;
}
</style>
App.vue的代码
<template>
<div id="app">
<div class="content">
<component :is="name"></component>
</div>
<h1>这是一个App组件</h1>
<button @click="name = 'Left'">显示Left</button>
<button @click="name = 'Right'">显示Right</button>
</div>
</template>
<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
name: "App",
components: {
Left,
Right,
},
data() {
return {
name: "Left",
};
},
};
</script>
<style lang="less">
.content {
display: flex;
}
</style>
69.png
3.keep-alive的使用
使用keep-alive可以保持状态，组件创建后不会被销毁，
那怕被隐藏了也不会被销毁。
-
使用keep-alive来保持状态
-
语法
<keep-alive> <组件名></组件名> </keep-alvie>
Left.vue的代码
<template>
<div class="box">
<h3>这是左边的组件{{ count }}</h3>
<button @click="count++">+1</button>
</div>
</template>
<script>
export default {
name: "Left",
data() {
return {
count: 0,
};
},
created() {
console.log("Left组件被创建了");
},
destroyed() {
console.log("Left组件被销毁了");
},
};
</script>
<style lang="less" scoped>
.box {
background-color: pink;
border: 1px solid;
height: 400px;
width: 400px;
color: white;
}
</style>
Right.vue的代码
<template>
<div class="box">这是右边的组件</div>
</template>
<script>
export default {
name: "Right",
};
</script>
<style lang="less" scoped>
.box {
background-color: blue;
border: 1px solid;
height: 400px;
width: 400px;
color: white;
}
</style>
App.vue的代码
<template>
<div id="app">
<div class="content">
<keep-alive>
<component :is="name"></component>
</keep-alive>
</div>
<h1>这是一个App组件</h1>
<button @click="name = 'Left'">显示Left</button>
<button @click="name = 'Right'">显示Right</button>
</div>
</template>
<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
name: "App",
components: {
Left,
Right,
},
data() {
return {
name: "Left",
};
},
};
</script>
<style lang="less">
.content {
display: flex;
}
</style>
实现效果：
- 如下：显示右边的组件的时候，但其实左边的组件被销毁，只是状态变为了 inactive,Left组件被缓存了，缓存到了内存中。
70.png
3.1 keep-alive 对应的生命周期函数
- 当组件被缓存的时候，会自动触发 deactivated生命周期函数
- 当组件被激活的时候，会自动触发activited 生命周期函数
- 当组件第一次被激活的时候，既会执行 created生命周期函数，又会执行 activited生命周期函数
- 只有给组件用keep-alive标签包裹的时候，deactivited生命周期函数和activited函数才会被创建
3.2 keep-alive的相关属性
3.2.1 include属性（哪些组件需要被缓存）
因为没有指定哪个组件被缓存，哪个组件不缓存，所以默认被keep-alive包裹的所有组件都会被缓存。
include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间 使用英文 逗号 分隔。
- 匹配首先会检查 组件自身的 name 属性，如果 name 属性 不可用。则匹配它局部注册名称（也就是父组件的 components选项的键值）。匿名的组件不能被匹配
71.png
- 这里指的组件本身name属性是否可用，指的是 组件的name属性是否被指定了值，如果指定了值，但与之不匹配的话，不会去父组件的componenst查看键值。
例如现在有一个需求：Left组件要求被缓存，Right组件不要求被缓存
72.png
3.2.2 exclude属性（哪些组件不需要被缓存）
- exclude属性和include属性不能同时使用，只能用一个
- 只有名称匹配的组件才不会被缓存，多个组件名之间用 英文逗号 隔开
- 匹配的规则和 include属性一致，先匹配组件本身的name属性，如果不可用会匹配 局部组件名称，即是 components的键值对
需求：Right组件不希望被缓存
73.png
4. 组件注册名称和组件声明名称的区别
- 如果在 声明组件 的时候， 没有为组件指定 name 名称，则组件的名称默认 就是 注册时候的名称
74.png
控制台查看
75.png
- 如果在声明的时候指定name的值，则组件的名称就是 name的值
76.png
控制台查看
77.png
- 组件的 注册名称应用场景是 ：以标签的形式，把注册好的组件，渲染和使用到页面结构之中。
- 组件的 声明名称应用场景：结合 keep-alive标签实现缓存功能，以及在调试工具中看到的组件 name 名称
5. 总结
动态组件和keep-alive的使用.png
网友评论