vue 中 keep-alive，activated，deactivated

keep-alive

        在组件反复切换时，会反复渲染，造成性能问题。用一个 <keep-alive></keep-alive> 标签将他包裹起来，组件会在第一次被创建的时候缓存下来。避免性能问题。

        首先准备好组件，配置好路由。准备了Home,Keep,About三个组件进行切换。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/keep">Keep</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style lang="less">
</style>

Keep.vue

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id" @click="selectedPost = post">
        {{ post.title }}
      </li>
    </ul>
    <div>
      <div v-if="selectedPost">
        <h3>{{ selectedPost.title }}</h3>
        <div v-html="selectedPost.content"></div>
      </div>
      <strong v-else> 点击标签 </strong>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          title: "第一个标签",
          content: "第一个标签内容",
        },
        {
          id: 2,
          title: "第二个标签",
          content: "第二个标签内容"
        },
        {
          id: 3,
          title: "第三个标签",
          content: "第三个标签内容"
        },
      ],
      selectedPost: null,
    };
  },
  created() {
    console.log('created');
  },
  activated() {
    console.log('activated');
  },
  mounted() {
    console.log('mounted');
  }
};
</script>

 

 

         在Keep组件中有三个标签，点击标签会变成

         如果不加<keep-alive></keep-alive> 标签，跳转到其他组件再跳转回Keep组件时，之前选择的内容不会被缓存，会显示

 

         加<keep-alive></keep-alive> 标签，再次跳转回来时，之前缓存的内容会被保存。

activated

        被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。

        在不加<keep-alive></keep-alive> 标签时，并不会调用activated：

        加上<keep-alive></keep-alive> 标签时，created和mounted钩子函数只会调用一次，每次切换到Keep组件，都会执行activated：

 

 deactivated

        被 keep-alive 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。