vue的动态组件 keep-alive

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. 总结