nuxt3正确使用keepalive页面缓存组件缓存

nuxt3,keepalive · 浏览次数 : 0

小编点评

本文将介绍如何在 Nuxt.js 3.x 版本中正确使用路由缓存和组件缓存，以提高网站的性能。文章首先提到了一些常见的使用场景和解决方案，然后详细讲解了如何在 Nuxt.js 中配置路由缓存和组件缓存。 1. 路由缓存在 Nuxt.js 中，可以使用 keep-alive 组件来实现页面缓存。在 app.vue 文件中添加 keep-alive 组件，并设置 include 属性，指定需要缓存的页面名称。示例： ```html ``` 如果页面路径复杂，可以在页面文件中声明组件的 name 值。例如： ```html ``` 2. 组件缓存如果需要在组件中使用 v-if 指令控制显示和隐藏，可以使用 keep-alive 组件进行缓存。在组件内部，可以通过定义 options 属性来指定组件的 name 值。示例： ```html ``` 如果需要在多个组件中使用相同的缓存逻辑，可以在 app.vue 文件中添加 keep-alive 组件，并设置 include 属性。示例： ```html ``` 总结：本文介绍了在 Nuxt.js 3.x 版本中如何使用 keep-alive 组件进行页面缓存和组件缓存，以提高网站的性能。通过正确配置 keep-alive 组件的 include 属性，可以实现对不同页面和组件的缓存。同时，需要注意在组件内部使用 v-if 指令控制显示和隐藏，以避免组件被销毁和重新创建。

正文

最近使用 nuxt@3.x 版本做SEO优化项目比较多，之前也踩坑过，所以记录一下在 nuxt3 中路由缓存的正确使用方法，本人也之前在GitHub社区中提交过反馈问题，最后是在 3.8.2 版本解决了路由缓存问题。下面讲解如何正确使用keepalive做到页面缓存，组件缓存。

# 环境版本如下
node # 21.4.0
nuxt # 3.12.3
vue # latest  目前最新版本 3.4.*

页面缓存

keepalive 我们知道都是用来缓存组件在组件卸载的时候并不去真正意义上的销毁，而是隐藏掉。等再次挂载的时候再把它显示出来。其组件的状态保持原有的状态，并不会初始化。写多了 vue 项目的小伙伴们，大部分通过路由文件( src/router.js )定义 name 值，再去 router-view 组件里包裹 keepalive 组件去判断路由里面的 name 值去使用。但是在 nuxt 框架内不需要这么复杂的操作。

app.vue文件内容

<!-- app.vue -->
<template>
    <div>
        <!-- 最新版vue支持的语法，老版本可能提示错误 -->
        <NuxtPage :keepalive />
    </div>
</template>
<script lang="ts" setup>
    // keepalive 所需的参数 指定name值为index 的页面 进行缓存
    const keepalive = {
        include: ["index"],
    };
</script>

pages文件夹

pages
├─index.vue # 若组件未定义name值 则为 文件名 index
└─user.vue # name为user

index.vue文件内容

<template>
    <div>index</div>
    <p>data: {{ data }}</p>
    <p>
        <button @click="data++">+1</button>
        <button @click="data--">-1</button>
    </p>
    <p class="links">
        <NuxtLink to="/user">user Page</NuxtLink>
    </p>
</template>
<script setup lang="ts">
    const data = ref(0);
</script>

项目启动路径为 http://localhost:3000/ 的时候，此时，在组件内操纵 data 的值变化，再去跳转 http://localhost:3000/user 时，再跳回 http://localhost:3000/ ， data 的值不会初始化，而是切换 /user 路由前页面的状态。此时使用 onActivated api来监听组件被激活。

<script lang="ts" setup>
    onActivated(() => {
        console.log("onActivated 页面激活了！");
    });
</script>

路径复杂的请使用defineOptions指定组件name值，以免使用路由缓存失败！

例如：pages/userData.vue，pages/news/detail，pages/news/[id].vue。这几个路径过于复杂，在 NuxtPage 组件中难以使用 include 属性值去判断缓存条件，所以需要在页面文件中声明该页面的组件 name 值。

<!-- pages/index.vue -->
<script setup lang="ts">
defineOptions({
  name: "IndexPage", 
}); 
</script>

<!-- pages/news/detail.vue -->
<script setup lang="ts">
defineOptions({
  name: "newsDetail", 
}); 
</script>

<!-- app.vue -->
<template>

    <div>
        <NuxtPage :keepalive />
    </div>

</template>
<script lang="ts" setup>

    const keepalive = {
        include: ["IndexPage","newsDetail"], 
        // 对应 pages/index.vue ,pages/news/detail.vue 中的 name 值 缓存路由
    };

</script>

组件缓存

如果在页面中，使用了v-if指令来控制组件显示，如何保证组件数据不被销毁。当然还是使用keepalive组件。假设我们在components文件中定义组件，会自动全局导入，无需引用。

components
├─Val
│  └─Input.vue # 若组件未定义name值 则为 文件名 Input
├─Counter.vue # 若组件未定义name值 则为 文件名 Counter
└─TextTip.vue # name 为 TextTip

<!-- components/Counter.vue -->
<template>
    <div class="counter">
        <h2>counter</h2>
        <p>data:{{ data }}</p>
        <p>
            <button @click="data++">+1</button>
            <button @click="data--">-1</button>
        </p>
    </div>
</template>

<script lang="ts" setup>
    const data = ref(0);
</script>
<style scoped>
    .counter {
        padding: 20px;
    }
</style>

<!-- components/TextTip.vue -->
<template>
    <div class="text-tip">
        <h2>text-tip</h2>
        <p>text: {{ text }}</p>
        <p>
            <button @click="text += '1'">add Text</button>
        </p>
    </div>
</template>
<script lang="ts" setup>
    const text = ref("text-1");
</script>

<!-- pages/index.vue -->
<template>
    <div>index</div>
    <p>
        <button @click="showCounter = !showCounter">
            {{ !showCounter ? "显示Counter" : "显示TextTip" }}
        </button>
    </p>
    <hr />
    <KeepAlive :include="keep.include">
        <Counter v-if="showCounter" />
        <TextTip v-else />
    </KeepAlive>
</template>
<script setup lang="ts">
    const showCounter = ref(false);
    const keep = {
        include: ["Counter"],
    };
</script>

此时点击 显示Counter 按钮，在 Counter 组件中操作内部数据改变 data:5 ，点击按钮再去切换组件显示隐藏，会发现 Counter 组件并不会销毁掉之前的值 data:5 ，而TextTip组件在操作内部的数据改变后切换 隐藏/显示 后， text 数据是初始化的值 text-1 。

注意components文件定义的组件name值

components/Counter.vue ， components/Val/Input.vue 的 name 值nuxt自动会给组件的name值取为文件名 Counter ， Input 。而在组件自动导入的时候却是使用 <Counter /> ， <ValInput /> 。会有点迷惑，所以请在使用 <KeepAlive> 组件包裹来缓存状态，请务必使用 defineOptions 指定组件的name值。

<!-- components/Val/Input.vue -->
<template>
    <div class="input-warpper">
        <h2>Input</h2>
        <input v-model="val" />
    </div>
</template>
<script lang="ts" setup>
    const val = ref("");
    defineOptions({
        name: "ValInput"
    })
</script>
<style>
    .input-warpper {
        margin: 20px;
    }
</style>

或者使用 export default { name:'xxx' } 来指定组件的name值，不使用 setup 语法。

<!-- components/Val/Input.vue -->
<template>
    <div class="input-warpper">
        <h2>Input</h2>
        <input v-model="val" />
    </div>
</template>
<script lang="ts" setup>
    const val = ref("");
</script>
<script lang="ts">
    export default {
        name: "ValInput"
    }
</script>
<style>
    .input-warpper {
        margin: 20px;
    }
</style>

案例地址

点击这里跳转代码案例，来调试 keepalive 页面缓存和组件缓存

推荐环境版本： node v21.4.0 , nuxt v3.12.* , 使用 pnpm 安装依赖。