vue中keep-alive、activated的探讨和使用「建议收藏」

全栈程序员-站长 • 2022年10月21日下午10:16 • 未分类 • 阅读 0

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。
百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。

顺便插个tip:富途2023届校招内推，需要内推的联系我哈！

keep-alive

<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。
说白了被<keep-alive>包裹的组件其会被缓存
废话不多说直接上例子.

我们现在创建两个子组件conpoment1,compoment2,其内容如下

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>

<script>
export default { 
   
  data() { 
   
    return { 
   };
  },
  methods: { 
   
    add() { 
   
      let ul = document.getElementsByClassName("content")[0];  
      let li = document.createElement("li");
      li.innerHTML = "我是添加的元素";
      ul.appendChild(li);     
    }
  }
};
</script>
<style >
</style>

Jetbrains全家桶1年46，售后保障稳定

代码不用解释了吧，就是点击按钮在ul动态添加一个li元素。
接着我们在路由中注册一下，再回到APP.vue中修改一下配置

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
</template>

这样我们就会发现，当我们切换路由的时候，我们之前添加的子元素还回保存在那里
在这里插入图片描述
如果是这样的话所有的页面都被缓存了，一些需要重新加载不需要缓存的我们可以通过v-for来实现。当然我们可以在路由中设置一个key值来判断组件是否需要缓存，就像下面这样

//index.js
{ 
   
      path: '/1',
      name: 'components1',
      component: Components1,
      meta: { 
   
        keepAlive: true   //判断是否缓存
      }
    },
    { 
   
      path: '/2',
      name: 'components2',
      component: Components2,
      meta: { 
   
         keepAlive: false
      }
    },

然后我们的App.vue中只需要判断其keepAlive值即可

  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
</template>

这时候我们回到页面中添加子元素并切换路由就会发现只有components1中的组件有缓存。

activated

先说下这个生命周期钩子，官网说其是在服务器端渲染期间不被调用，
说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。我们直接来试一下就知道了。

//components1中
  created() { 
   
    console.log("1激活created钩子函数");
  },
  activated() { 
   
    console.log("1激活activated钩子函数");
  },
  mounted() { 
   
    console.log("1激活mounted钩子函数");
  }

//components2中
  created() { 
   
    console.log("2激活created钩子函数");
  },
  activated() { 
   
    console.log("2激活activated钩子函数");
  },
  mounted() { 
   
    console.log("2激活mounted钩子函数");
  }