子组件怎么直接挂在到body上_内置组件篇keepalive

最新推荐文章于 2024-02-07 11:08:41 发布

weixin_39644377

最新推荐文章于 2024-02-07 11:08:41 发布

阅读量660

点赞数

文章标签：子组件怎么直接挂在到body上

本文链接：https://blog.csdn.net/weixin_39644377/article/details/111615620

版权

本文详细介绍了Vue内置组件KeepAlive的工作原理，包括如何缓存组件以保留状态，以及如何通过include、exclude和max属性进行条件缓存。通过源码解析，阐述了KeepAlive的created、mounted等生命周期，以及LRU缓存策略。同时，讨论了KeepAlive影响的组件生命周期钩子，如activated和deactivated。

摘要由CSDN通过智能技术生成

1. 前言

是 Vue 实现的一个内置组件，也就是说 Vue 源码不仅实现了一套组件化的机制，也实现了一些内置组件，关于组件，官网如下介绍：

是Vue中内置的一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

这句话的意思简单来说：就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。

我们来举个例子看看，假如有如下代码：

<div id="app">  <button @click="switchComp('child1')">组件1button>  <button @click="switchComp('child2')">组件2button>  <component :is="chooseComponent">component>div><body>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>  <script>    var child1 = {
          template: '

组件1:

', } var child2 = {
    template: '

组件2:

' } var vm = new Vue({
    el: '##app', components: {
    child1, child2, }, data() {
    return {
    chooseComponent: 'child1', } }, methods: {
    switchComp(component) {
    this.chooseComponent = component; } } })script>body>

可以看到，上述代码中定义了两个子组件child1和child2，然后使用两个按钮和一个动态组件来做出点击按钮切换不同组件的效果，如下图：

从上图中可以看到，我们给组件1和组件2的输入框中分别输入了不同的内容后，之后当我们点击按钮切换组件的时候，切换之前输入的内容已经不存在了，这就说明点击按钮切换组件是把之前的组件销毁，然后又重新挂载了一次。

但是我们有时候又会有这样的需求：当用户再次切回组件时保留切走之前的组件状态。此时Vue内置的组件就派上用场了，我们将上述代码中的动态组件用包裹一下，如下：

<div id="app">  <button @click="switchComp('child1')">组件1button>  <button @click="switchComp('child2')">组件2button>  <keep-alive>    <component :is="chooseComponent">component>  keep-alive>div>

此时的效果如下：

可以看到，child1和child2不管怎么切换它都能保留自己切换之前的状态了。这就说明，当我们切换组件的时候，组件并没有被销毁，而是被保存在了内存中，这样当我们再次切回去的时候就可以拿到切走之前的状态。

那么，组件到底是如何实现这个功能的呢？本篇文章就来分析组件的内部实现原理。

2 用法回顾

介绍原理之前，我们先根据官方文档来回顾一下组件的具体用法，如下：

组件可接收三个属性：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<keep-alive include="a,b">  <component :is="view">component>keep-alive><keep-alive :include="/a|b/">  <c

最低0.47元/天解锁文章

weixin_39644377

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子组件怎么直接挂在到body上_内置组件篇keepalive

1. 前言是 Vue 实现的一个内置组件，也就是说 Vue 源码不仅实现了一套组件化的机制，也实现了一些内置组件，关于组件，官网如下介绍：是Vue中内置的一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这句话的意思简单来说：就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样就会帮我们把组...
复制链接

扫一扫