Vue SPA 应用中缓存优化及本地存储实践指南-JavaScript中文网-JavaScript教程资源分享门户

前端 SPA（Single Page Application）应用越来越普及，它可以提升用户的交互体验和页面加载速度。但是在应用的开发和维护中，性能优化也是必不可少的一环。本文将会介绍 Vue SPA 应用中缓存优化的相关技术以及本地存储实践，以便于大家更好地开发和优化自己的 Vue SPA 应用。

页面缓存优化

页面缓存优化主要是为了提高页面的加载速度，尤其是对于频繁修改的页面，缓存可以节省重复渲染的时间，提高用户的操作效率。

keep-alive 组件

Vue 提供了 keep-alive 组件，用来缓存组件，避免重复加载和销毁，提高页面渲染速度。

// javascriptcn.com 代码示例
<template>
  <div>
    <router-view v-if="$route.meta.keepAlive">
      <!-- 带有 keepAlive 属性的页面才开启组件缓存 -->
    </router-view>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <!-- 不带有 keepAlive 属性的页面每次都会重新加载 -->
    </keep-alive>
  </div>
</template>

使用方法：

在需要缓存的页面组件上添加 meta 属性，并设置 keepAlive 为 true。

export default {
  name: "HomePage",
  meta: {
    keepAlive: true
  }
};

需要注意的事项：

keep-alive 组件只适用于具有缓存要求的同级路由组件，嵌套路由组件需要自己手动实现缓存。
keep-alive 组件可以使用 include 和 exclude 属性来控制哪些组件需要缓存。

路由缓存

除了 keep-alive 组件，Vue 还提供了另一种缓存方式：路由缓存。

路由缓存可以缓存当前路由和其所包含的子路由，从而达到加速页面加载的目的。Vue Router 4 新增了路由缓存功能，并提供了新的 API：<router-view v-slot="{ Component }">。

使用方法：

在需要缓存的路由组件上添加 meta 属性，并设置 cache 为 true。

// javascriptcn.com 代码示例
const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
    meta: {
      cache: true
    }
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

在父路由的 router-view 组件中使用 v-slot="{Component}"，并添加一个动态组件将 Component 渲染出来，从而实现路由缓存。

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component"></component>
  </keep-alive>
</router-view>

缓存数据

对于频繁请求的 API 接口，可以使用 Vuex 来统一管理，避免重复请求。

使用方法：

在需要缓存的模块中添加 namespaced 属性为 true，并实现 actions 和 mutations 方法，从而实现对数据的统一管理。

// javascriptcn.com 代码示例
const users = {
  namespaced: true,
  state: { list: [] },
  getters: {
    getUsers(state) {
      return state.list;
    }
  },
  mutations: {
    setUsers(state, data) {
      state.list = data;
    }
  },
  actions: {
    async getUsers({ commit }) {
      // 发送异步请求获取数据
      let data = await HttpRequest({ url: "/users" });
      commit("setUsers", data);
    }
  }
};

export default new Vuex.Store({
  modules: { users }
});

使用时只需要在组件中调用 actions 方法，Vuex 就会自动判断数据是否过期，如果过期会重新请求数据。

// javascriptcn.com 代码示例
export default {
  created() {
    this.$store.dispatch("users/getUsers");
  },
  computed: {
    users() {
      return this.$store.getters["users/getUsers"];
    }
  }
};

本地存储

对于一些不需要频繁更新的数据，可以将其存储在浏览器的本地存储中，从而避免重复请求数据，提高页面加载速度。

localStorage 和 sessionStorage

localStorage 和 sessionStorage 都是浏览器提供的本地存储方案，它们的 API 和使用方法基本上是相同的。

localStorage：存储的数据没有过期时间限制，直到用户清除浏览器缓存才会过期。

// 存储数据
localStorage.setItem("name", "Jack");

// 读取数据
localStorage.getItem("name");

// 删除数据
localStorage.removeItem("name");

sessionStorage：存储的数据只在当前会话（tab 关闭即过期）中有效，关闭浏览器会清除所有 sessionStorage 数据。

// 存储数据
sessionStorage.setItem("name", "Jack");

// 读取数据
sessionStorage.getItem("name");

// 删除数据
sessionStorage.removeItem("name");

应用实践

实际应用中，我们可以把一些基础数据存储在本地缓存中，如字典、城市列表等数据。首先封装一个本地存储工具类，用来对数据的存储、读取、删除进行管理。

// javascriptcn.com 代码示例
const Storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },

  get(key) {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  },

  remove(key) {
    localStorage.removeItem(key);
  },
};

export default Storage;

然后在需要使用的组件中，将数据存储在本地缓存中，并在读取数据时进行本地缓存优先，如果本地没有数据才会去服务器请求数据，从而实现数据的优化缓存。

// javascriptcn.com 代码示例
import Storage from "@/utils/storage";

export default {
  async created() {
    let cities = Storage.get("cities");
    if (!cities) {
      cities = await HttpRequest({ url: "/cities" });
      Storage.set("cities", cities);
    }
    this.cities = cities;
  },
};

总结

本文介绍了 Vue SPA 应用中缓存优化及本地存储实践的相关技术，并给出了示例代码。在实际开发中，我们可以根据具体的项目需求选择合适的缓存技术，从而提高页面的加载速度，提升用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e267a7d4982a6ebf33ca6