Vue2+Nuxt中reactive在类实例服务上失效问题排查

我有一个仅存储激活/未激活状态的逻辑组件（无独立渲染模板），未设置ID时功能正常；设置ID后可实现多模块状态互斥（比如点击菜单或商品目录按钮时，二者内容在同一区域显示，避免叠加——启用菜单时隐藏商品目录，反之亦然）。实现逻辑是为每个可激活实体分配ID及排除ID列表，切换状态时自动停用排除项。但当前组件无法感知服务状态变化，必须手动刷新DevTools才能看到最新状态，且这套方案在Vue3中正常运行，在Vue2+Nuxt环境下失效。

相关代码如下：

Menu.vue 模板:

<template>
  <section class="menu" :style="{'--sticky-bottom': StickyBottom + 'px'}">
    <CanActive id="header-menu" :excludeIds="['header-catalog']" v-slot="{isActive, toggleShow}">
      <div class="menu__bg" :class="{active: isActive}"></div>
      <button class="menu__btn"
              :class="{active: isActive}"
              @click="toggleShow"
      >
        <span></span>
      </button>
      <MenuBody class="menu__body"
                :class="{active: isActive}"
                :style="{'--sticky-bottom': StickyBottom + 'px'}"
      />
    </CanActive>
  </section>
</template>

CanActive.vue:

<template>
  <div class="logical">
    <slot :isActive="IsActive" :toggleShow="toggleShow"></slot>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "~/tools/version-types";
import {Prop} from "vue-property-decorator";
import {canActiveViewService} from "@shared/services/ui/view/canActive.view.service";

@Component({
  name: "CanActiveComponent",
})
export default class CanActiveComponent extends Vue {
  @Prop({default: false}) startValue: boolean;
  @Prop({default: null}) id: string | null;
  @Prop({default: []}) excludeIds: string[];

  isShowInner: boolean = false;

  mounted() {
    this.IsActive = this.startValue;
  }

  toggleShow() {
    this.IsActive = !this.IsActive;
  }

  close() {
    this.IsActive = false;
  }

  get Service() {
    return canActiveViewService;
  }

  get IsActive() {
    if (this.id) {
      return this.Service.state[this.id];
    } else {
      return this.isShowInner;
    }
  }

  set IsActive(value) {
    if (this.id) {
      this.Service.setIdValue(this.id, value, this.excludeIds)
    } else {
      this.isShowInner = value;
    }
  }
}
</script>

<style lang="scss" scoped>
.logical {
  display: contents;
}
</style>

CanActiveViewService:

import {reactive} from "vue";

class CanActiveViewService {
    // reactive - try to fix problem
    state: Record<string, boolean> = reactive({});

    setIdValue(id: string, val: boolean, excludedIds: string[]) {
        this.state[id] = val;
        excludedIds.forEach((id) => {
            this.state[id] = false;
        });

        console.dir(this.state);
    }
}

export const canActiveViewService = reactive(new CanActiveViewService());

失效原因分析 #

1. Vue2与Vue3的reactive API本质差异 #

Vue3的reactive基于Proxy实现，能深度代理对象、类实例，自动追踪新增/删除属性的变化；但Vue2没有原生reactive API，即便使用@vue/composition-api提供的reactive，其底层还是依赖Object.defineProperty，无法正确监听类实例内部属性的动态变化，也无法完美处理类实例的响应式包装。

2. 动态属性的响应式缺失 #

Vue2的Object.defineProperty只能追踪预定义属性的变化，当你通过this.state[id] = val动态添加属性时，默认不会被转为响应式属性，组件的计算属性（IsActive getter）无法感知到这些变化，自然不会触发视图更新。

3. 类实例的响应式包装缺陷 #

你将整个CanActiveViewService实例用reactive包裹导出，但在Vue2环境下，类的方法和内部属性无法被正确代理，调用setIdValue修改state时，响应式系统无法捕捉到状态变更，导致组件无法更新。

修复方案 #

方案一：改用Vue2原生响应式API重构服务 #

用Vue2的Vue.observable创建响应式实例，并用Vue.set确保动态添加的属性具备响应式：

import Vue from 'vue';

class CanActiveViewService {
    state: Record<string, boolean> = {};

    setIdValue(id: string, val: boolean, excludedIds: string[]) {
        // 用Vue.set确保属性是响应式的
        Vue.set(this.state, id, val);
        excludedIds.forEach((excludeId) => {
            Vue.set(this.state, excludeId, false);
        });
    }
}

// 用Vue.observable创建响应式服务实例
export const canActiveViewService = Vue.observable(new CanActiveViewService());

方案二：优化组件的依赖追踪（临时方案） #

在CanActive.vue中通过深度监听服务状态的变化，强制触发组件更新：

// 在CanActive.vue的script中添加Watch装饰器
import {Watch} from 'vue-property-decorator';

// ... 其他代码

@Watch('Service.state', { deep: true })
onStateChanged() {
    this.$forceUpdate();
}

注：此方案属于临时 workaround，更推荐使用方案一从根源解决响应式问题。

内容的提问来源于stack exchange，提问作者ATLANT