热更新报错 TypeError: parentComponent.ctx.deactivate is not a function
Vue version
3.2.25
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-xqwn2n?file=src/components/HelloWorld.vue
Steps to reproduce
当修改usePage函数的参数
What is expected?
页面发生修改
What is actually happening?
parentComponent.ctx.deactivate is not a function
System Info
No response
Any additional comments?
No response
3
vue@3.2.37 ， vue-router@4.0.16, vite@2.9.13 , @vitejs/plugin-vue@2.3.3 当 router-view 把 keep-alive 包裹的时候，无论 component key 是什么，热更新 router-view 下的根组件 都会报错 ，子组件不会
TypeError: parentComponent.ctx.deactivate is not a function
+1
same error
vue@3.2.37 ， vue-router@4.0.16, vite@2.9.13 , @vitejs/plugin-vue@2.3.3 当 router-view 被 keep-alive 包裹的时候，无论 key 是什么，热更新 router-view 下的根组件 都会报错 ，子组件不会
TypeError: parentComponent.ctx.deactivate is not a function
盲猜你是把 component 套了自定义组件里了，导致找不到 keepalive 实例，所以 deactivate 函数找不到。
@chenhaihong
我之前的描述反了，应该是当 router-view 把 keep-alive 包裹
我用 keep-alive 是为了 移动端路由 在回退时 恢复状态
App.vue
<script setup>
</script>
<template>
<router-view v-slot="{ Component }">
<!-- TODO keep-alive 路由回退需要清除缓存 -->
<keep-alive>
<component
:is="Component"
:key="$route.fullPath"
/>
</keep-alive>
</router-view>
</template>
<style lang="scss" scoped></style>
router.ts
router.beforeEach((to, from, next) => {
if (!to.query.t) {
to.query.t = new Date().getTime().toString();
return next(to);
}
next();
});
+1
+1
same error
saaaaaaaaaaaaaaaaaaaame error
same error
same error
我也是同样的问题，ctrl+s保存就报错，
same error！
same
same error!!!
相同的
请问有解决方法吗
同样的错误！！！
请问有解决方案吗
same error
升级chrome到最新版本可以解决，但还是有些场合无法升级浏览器版本。
同样的报错，chrome 版本是 100
一个笨拙的解决办法，将报错的.vue文件当成一个组件，然后新建一个index.vue引入这个组件。
chrome 105.0.5195.102 依然存在该问题
chrome 105.0.5195.102 依然存在该问题
关浏览器什么事
chrome 105.0.5195.102 依然存在该问题
关浏览器什么事
我也觉得和浏览器无关，试了好几个vue旧版本，有的版本即使控制台不报错，KeepAlive的页面，多次切换或热更新显示也有异常
换了最新的 chrome 浏览器，也一样报错
Temporary Solutions 临时解决方案
<template v-if="NODE_ENV !== 'development'">
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</template>
<template v-else>
<component :is="Component" :key="route.fullPath" />
</template>
vue-cli
const NODE_ENV = process.env.NODE_ENV
vite https://cn.vitejs.dev/guide/env-and-mode.html
<template v-if="!DEV">
const DEV = import.meta.env.DEV;
Temporary Solutions 临时解决方案
<template v-if="NODE_ENV !== 'development'"> <keep-alive> <component :is="Component" :key="route.fullPath" /> </keep-alive> </template> <template v-else> <component :is="Component" :key="route.fullPath" /> </template>vue-cli
const NODE_ENV = process.env.NODE_ENV
这个方案不行啊，因为KeepAlive的页面打包后也有异常。不仅仅是开发模式的问题
Temporary Solutions 临时解决方案
<template v-if="NODE_ENV !== 'development'"> <keep-alive> <component :is="Component" :key="route.fullPath" /> </keep-alive> </template> <template v-else> <component :is="Component" :key="route.fullPath" /> </template>vue-cli
const NODE_ENV = process.env.NODE_ENV这个方案不行啊，因为KeepAlive的页面打包后也有异常。不仅仅是开发模式的问题
我这边主要是热更新遇到问题了，也就是开发环境，生产环境没有遇到问题。 你说的生产环境来回切换遇到问题是什么问题，可以具体一点，可以的话最好是附一下代码。 附代码请用 https://codesandbox.io/ or https://stackblitz.com/
Temporary Solutions 临时解决方案
<template v-if="NODE_ENV !== 'development'"> <keep-alive> <component :is="Component" :key="route.fullPath" /> </keep-alive> </template> <template v-else> <component :is="Component" :key="route.fullPath" /> </template>vue-cli
const NODE_ENV = process.env.NODE_ENV这个方案不行啊，因为KeepAlive的页面打包后也有异常。不仅仅是开发模式的问题
我这边主要是热更新遇到问题了，也就是开发环境，生产环境没有遇到问题。 你说的来回切换遇到问题是什么问题，可以具体一点，可以的话最好是附一下代码。
页面1是集成了echarts图表的KeepAlive页面，页面2是普通的vue KeepAlive页面，页面1切换到页面2后，会发现走了页面1的beforeUnmount \ unmounted 生命周期；再切回1，echarts图表都不显示出来，显示的是白色占位块（因为页面1已经销毁了）。
页面1是集成了echarts图表的KeepAlive页面，页面2是普通的vue KeepAlive页面，页面1切换到页面2后，会发现走了页面1的beforeUnmount \ unmounted 生命周期；再切回1，echarts图表都不显示出来，显示的是白色占位块（因为页面1已经销毁了）。
你这个不一定是vue的问题，可能是echarts的问题。你这个问题，不附代码，没法定位。