Vue3升级后外部响应式数据更新无法触发组件重渲染问题

核心原因 #

Vue 3.2版本对响应式依赖追踪机制做了性能优化，导致原有的外部响应式对象引用方式失效：

• 若组件初始化时Battle.instance尚未创建，data中返回的props会是undefined，且后续Battle.instance创建后，data属性不会自动更新（data是初始化时的静态快照，无响应式追踪能力）。
• 即使初始化时Battle.instance已存在，直接将外部reactive对象赋值给data属性，组件无法正确建立对该对象内部属性的依赖追踪（3.2版本的优化收紧了追踪触发条件）。

解决方案 #

方案1：使用计算属性（推荐）

用computed返回外部响应式对象，让组件自动追踪Battle.instance和对象内部属性的变化：

<template>
   <div class="timmer text-shadow">
       <h1 :class="{ redText: pickingPhaseProps?.time && pickingPhaseProps.time <= 10000 }">
             {{ pickingPhaseProps?.time && Math.floor(pickingPhaseProps.time / 1000) }}
       </h1>
   </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
    setup() {
        const pickingPhaseProps = computed(() => Battle.instance?.pickingPhaseProps);
        return { pickingPhaseProps };
    }
    // 其他逻辑
});
</script>

方案2：用ref包装外部响应式对象

如果Battle.instance会动态初始化，可在外部或内部用ref包装对象，确保引用关系的响应性：

• 在PickingPhase.ts中调整：

import { ref } from 'vue';

public pickingPhaseProps = ref({
    time: 0,
    phase: Shared.DRAFT_PHASES.PICK_PHASE,
    draftMode: Shared.DRAFT_TYPES.ALL_PICK,
    draftTurn: -1
});

• 组件中通过计算属性访问：

<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
    setup() {
        const props = computed(() => Battle.instance?.pickingPhaseProps.value);
        return { props };
    }
});
</script>

方案3：确保初始化时实例已存在

若Battle.instance在组件初始化前就已创建，可直接在setup中返回该响应式对象：

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    setup() {
        return {
            props: Battle.instance.pickingPhaseProps
        };
    }
});
</script>

补充说明 #

Vue 3.0.5版本的响应式追踪逻辑相对宽松，即使data中是静态引用，模板仍能追踪到外部响应式对象的变化。但3.2版本为了提升性能，仅对明确的响应式依赖（如computed、ref、reactive声明的属性）进行追踪，因此旧写法失效。

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