这实际上意味着什么-在Vue.js中使用keep-alive组件创建和激活

Question

最初，我是从api钩子中的created获取数据，这很正常。

created() {
    this.fetchInformation()
}

但是我一直在研究生命周期挂钩的最佳实践，因此我来到了这一行。您需要在初始化时为组件获取一些数据。使用已创建（或已创建+激活用于保持活动状态的组件）

我也试图在互联网上寻找相关文章或信息。

参考网址-https://alligator.io/vuejs/component-lifecycle/

我的组件正在keep-alive内部渲染，因此我出于测试目的进行了尝试。

activated() {
    this.fetchInformation()
}

现在，每次激活created时，都可以像预期的那样代替component执行api调用，这真的很酷。但是我仍然想了解在使用created + activated或activated时这实际上created是什么，但是如果我是正确的，只需阅读我应该同时做这两个事情即可。

请告知我是否需要其他任何信息来理解我的问题。

谢谢

Answer 1

正确使用保持活动状态！

不正确：

<template>
  <div>
    <div v-if="canRender">
      <keep-alive>
        <my-component />
      </keep-alive>
    </div>
  </div>
<template>

不正确：

<template>
  <div>
    <keep-alive>
      <div v-if="canRender">
        <my-component />
      </div>
    </keep-alive>
  </div>
<template>

正确：

<template>
  <div>
    <div>
      <keep-alive>
        <my-component v-if="canRender" />
      </keep-alive>
    </div>
  </div>
<template>