vue缓存

// Vue缓存示例代码

// 1. 使用 v-once 指令
<template>
  <div>
    <!-- v-once 指令会将元素或组件只渲染一次 -->
    <p v-once>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  mounted() {
    // 即使 message 变化，v-once 渲染的内容也不会更新
    setTimeout(() => {
      this.message = 'Message changed!';
    }, 2000);
  }
};
</script>

// 2. 使用 keep-alive 组件缓存路由组件
<template>
  <div>
    <!-- keep-alive 包裹动态组件时，会缓存不活动的组件实例 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  // 其他配置...
};
</script>

// 3. 使用 localStorage 或 sessionStorage 缓存数据
<script>
export default {
  data() {
    return {
      cachedData: JSON.parse(localStorage.getItem('cachedData')) || []
    };
  },
  methods: {
    saveToCache(data) {
      this.cachedData.push(data);
      localStorage.setItem('cachedData', JSON.stringify(this.cachedData));
    }
  }
};
</script>

解释说明：

1. v-once 指令：用于只渲染一次内容，即使数据发生变化，该指令包裹的内容也不会重新渲染。适合静态内容。
2. keep-alive 组件：用于缓存组件实例，避免频繁切换时重新加载和初始化。常用于路由组件的缓存。
3. localStorage 和 sessionStorage：用于在浏览器中持久化存储数据，适用于需要长期保存的数据缓存。