vue3中keep-alive使用include不生效

在Vue3中,由于setup语法糖导致无法直接定义组件name,这影响了keep-alive的include功能。文章提供了两种解决方案:一是使用两个script标签,一个用于setup,另一个定义name;二是通过vite-plugin-vite-setup-extend插件,在单个script标签中设置name。
摘要由CSDN通过智能技术生成

Vue3的setup语法糖,导致无法自定义组件name,使用keep-alive是需要name的,所以include不生效。
解决这个问题通常有两种方式

方式一:是通过写两个script标签来解决,一个使用setup,一个不使用

使用方式如下:

<template>
   <input type="text" v-model="value">
</template>  
<script setup lang="ts">
import { ref } from "vue";
 const value=ref("测试添加name");
</script>
<script lang="ts">
 export default {
    name:'testAddName'
 }
</script>

方式二:借助vite-plugin-vue-setup-extend插件

此种方式不需要写两个script标签,可以直接在script标签上定义name

1、安装插件

npm install vite-plugin-vue-setup-extend --save

2、配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ]
})

3、在组件中使用

<script name='testAddName'></script>
 
<script setup name='testAddName'></script>
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue 3项目使用keep-alive组件的方式和Vue 2项目类似。keep-alive组件可以在组件切换过程将状态保留在内存,防止重复渲染DOM。它可以包裹动态组件时,缓存不活动的组件实例,而不是销毁它们。和Vue 2keep-alive相似,keep-alive组件在Vue 3仍然是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件。 对于Vue 3项目keep-alive使用,你可以在组件的根节点上使用<keep-alive>标签来包裹需要缓存的组件。这样,在组件切换时,被包裹的组件实例将会被缓存起来,而不是被销毁。当再次切换到该组件时,之前的状态将会被恢复,从而避免了重复渲染DOM的开销。例如: ``` <template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> ``` 在这个例子,<router-view>是一个动态组件,被<keep-alive>标签包裹起来。这样,在切换路由时,被缓存的组件实例将会保留在内存,而不会被销毁。这可以提高页面的性能和用户体验。同时,你也可以通过设置keep-alive组件的属性来进一步控制缓存的行为,例如设置max属性来限制缓存的组件实例数量。 总结起来,Vue 3keep-alive组件可以帮助我们在项目开发管理缓存页面,避免重复渲染DOM,提高性能和用户体验。通过在组件的根节点上使用<keep-alive>标签来包裹需要缓存的组件,可以实现这一功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-router-keep-alive-helper:Vue.js缓存自动管理插件,自动创建、销毁缓存页面](https://download.csdn.net/download/weixin_42098251/16636272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue2 + webpack5相适配的 能成功打包的 package.json 文件](https://download.csdn.net/download/weixin_43405300/88252148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue组件 keep-alive 和 transition 使用详解](https://download.csdn.net/download/weixin_38723105/14828063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值