vue3.2.40，keepalive热更新报错 TypeError: parentComponent.ctx.deactivate is not a function

秒速五厘米 2024-04-03 10:12 29阅读 0赞

> [https://github.com/vuejs/core/issues/6222][https_github.com_vuejs_core_issues_6222]  
> [https://github.com/vuejs/core/pull/4339\#issuecomment-1238984279][https_github.com_vuejs_core_pull_4339_issuecomment-1238984279]

目前vue最新版已修复该问题，请尝试更新最新版本  
3.2.40版本从github上找到的暂时解决方案如下：  
直接复制即可，有include需求的改下注释掉的内容，没有的话应该是直接能用的，不需要修改

<template>
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <component :is="wrap(route.fullPath, Component)" :key="route.fullPath" />
        </keep-alive>
      </router-view>
    </template>
    
    <script>
    import {
           h } from "vue";
    // 自定义name的壳的集合
    const wrapperMap = new Map()
    export default {
          
      data() {
          
        return {
          
          include: [],
        }
      },
      watch: {
          
        $route: {
          
          handler(next) {
          
            // // ??这个按自己业务需要，看是否需要缓存指定页面组件
            // const index = store.list.findIndex(item => item.fullPath === next.fullPath)
            // // 如果没加入这个路由记录，则加入路由历史记录
            // if (index === -1) {
          
            //   this.include.push(next.fullPath)
            // }
          },
          immediate: true,
        },
      },
      methods: {
          
        // 为keep-alive里的component接收的组件包上一层自定义name的壳
        wrap(fullPath, component) {
          
          let wrapper
          // 重点就是这里，这个组件的名字是完全可控的，
          // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字
          // 这就能配合 keep-alive 的 include 属性可控地操作缓存
          if (component) {
          
            const wrapperName = fullPath
            if (wrapperMap.has(wrapperName)) {
          
              wrapper = wrapperMap.get(wrapperName)
            } else {
          
              wrapper = {
          
                name: wrapperName,
                render() {
          
                  return h("div", {
           className: "vaf-page-wrapper" }, component)
                },
              }
              wrapperMap.set(wrapperName, wrapper)
            }
            return h(wrapper)
          }
        },
      },
    }
    </script>

[https_github.com_vuejs_core_issues_6222]: https://github.com/vuejs/core/issues/6222
[https_github.com_vuejs_core_pull_4339_issuecomment-1238984279]: https://github.com/vuejs/core/pull/4339#issuecomment-1238984279