阅读量:92
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 