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>
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组件被缓存了，缓存到了内存中。
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选项的键值）。匿名的组件不能被匹配
- 这里指的组件本身name属性是否可用，指的是 组件的name属性是否被指定了值，如果指定了值，但与之不匹配的话，不会去父组件的componenst查看键值。
例如现在有一个需求：Left组件要求被缓存，Right组件不要求被缓存
3.2.2 exclude属性（哪些组件不需要被缓存）
- exclude属性和include属性不能同时使用，只能用一个
- 只有名称匹配的组件才不会被缓存，多个组件名之间用 英文逗号 隔开
- 匹配的规则和 include属性一致，先匹配组件本身的name属性，如果不可用会匹配 局部组件名称，即是 components的键值对
需求：Right组件不希望被缓存
4. 组件注册名称和组件声明名称的区别
- 如果在 声明组件 的时候， 没有为组件指定 name 名称，则组件的名称默认 就是 注册时候的名称
控制台查看
- 如果在声明的时候指定name的值，则组件的名称就是 name的值
控制台查看
- 组件的 注册名称应用场景是 ：以标签的形式，把注册好的组件，渲染和使用到页面结构之中。
- 组件的 声明名称应用场景：结合 keep-alive标签实现缓存功能，以及在调试工具中看到的组件 name 名称
5. 总结
