1. 首页
  2. 问答
  3. [vuejs/core]热更新报错 TypeError: parentComponent.ctx.deactivate is not a function

[vuejs/core]热更新报错 TypeError: parentComponent.ctx.deactivate is not a function

2023-12-08 121 views

回答

1

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

lisonge

1

盲猜你是把 component 套了自定义组件里了，导致找不到 keepalive 实例，所以 deactivate 函数找不到。

chenhaihong

2

@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();
});

lisonge

4

我也是同样的问题，ctrl+s保存就报错，

wy1139

5

升级chrome到最新版本可以解决，但还是有些场合无法升级浏览器版本。

leyue

7

同样的报错，chrome 版本是 100

poerlang

6

一个笨拙的解决办法，将报错的.vue文件当成一个组件，然后新建一个index.vue引入这个组件。

Shadows-kk

2

chrome 105.0.5195.102 依然存在该问题

midfar

2

我也觉得和浏览器无关，试了好几个vue旧版本，有的版本即使控制台不报错，KeepAlive的页面，多次切换或热更新显示也有异常

midfar

0

换了最新的 chrome 浏览器，也一样报错

poerlang

1

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;

Eunknight

8

这个方案不行啊，因为KeepAlive的页面打包后也有异常。不仅仅是开发模式的问题

midfar

6

我这边主要是热更新遇到问题了，也就是开发环境，生产环境没有遇到问题。 你说的生产环境来回切换遇到问题是什么问题，可以具体一点，可以的话最好是附一下代码。 附代码请用 https://codesandbox.io/ or https://stackblitz.com/

Eunknight

3

页面1是集成了echarts图表的KeepAlive页面，页面2是普通的vue KeepAlive页面，页面1切换到页面2后，会发现走了页面1的beforeUnmount \ unmounted 生命周期；再切回1，echarts图表都不显示出来，显示的是白色占位块（因为页面1已经销毁了）。

midfar

6

你这个不一定是vue的问题，可能是echarts的问题。你这个问题，不附代码，没法定位。

Eunknight

5

今天没时间看，后面有时间我看一下吧，看了可能也解决不了问题。

Eunknight

0

@midfar 看下这个能不能用 https://github.com/vuejs/core/pull/4339#issuecomment-1238984279

自己给 keep-alive 包裹的 component 包个壳。 我原本在做做多tab单页应用的时候，也遇到这个问题，加了这个壳后，在开发和生产模式下都没有再出现过这个问题。

chenhaihong

6

你这样改貌似可以，但是控制台有另一个警告（好像不影响功能） [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

midfar

2

恩，可以了，牛逼啊

midfar

5

加壳的操作，有点复杂，而且意义也不明确，最好官方能支持，不用我们加这么多代码

poerlang

4

加markRaw就没警告了，return h(markRaw(wrapper));

xinsites

9

vue@3.2.41，same error: image

paul-xia

1

Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 我也是一样的问题，热更新就报错

xjtarzan

9

如果你使用vue3.2x的版本还有相同的问题，使用的是官网推荐的router-view > keep-alive > suspense > component ，那你可以尝试下下面这个模板，个人通过几台电脑测试了一下是可以跑得通的。 image

yiaokan

 相关问题