core
core copied to clipboard
vuejs
热更新报错 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
[email protected] ， [email protected], [email protected] , @vitejs/[email protected] 当 router-view 把 keep-alive 包裹的时候，无论 component key 是什么，热更新 router-view 下的根组件 都会报错 ，子组件不会
TypeError: parentComponent.ctx.deactivate is not a function
[email protected] ， [email protected], [email protected] , @vitejs/[email protected] 当 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();
});
chrome 105.0.5195.102 依然存在该问题
关浏览器什么事
我也觉得和浏览器无关，试了好几个vue旧版本，有的版本即使控制台不报错，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
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_ENVvite https://cn.vitejs.dev/guide/env-and-mode.html
这个方案不行啊，因为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_ENVvite https://cn.vitejs.dev/guide/env-and-mode.html
这个方案不行啊，因为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_ENVvite https://cn.vitejs.dev/guide/env-and-mode.html
这个方案不行啊，因为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的问题。你这个问题，不附代码，没法定位。