VueJS 2组件无法正确设置布尔值与数值，应用失去响应性

问题现象 #

• Vue DevTools中无法找到当前组件实例
• mounted钩子内的接口回调中修改loading、step等data变量时，视图无更新，数据实际未变更
• 接口请求外部直接修改data（如this.loading = false）可正常生效
• 嵌套组件中相同的请求+赋值逻辑出现同样问题
• 已确认接口返回有效数据，且代码进入了赋值分支

代码示例 #

<template>
  <div class="resume-creation">
      <p>{{ step }}</p>
      <p>{{ loading }}</p>
      <div
        v-cloak
        v-if="(step === 1 || step === 2) && !loading"
        :class="{
          'resume-private-informations-container-form': !activitySectorListOpened,
          'resume-activity-sector-container-form': activitySectorListOpened,
        }"
      >
        "TEST 1 OR 2"
        <v-resume-creation-step1 :......>
        </v-resume-creation-step1>
      </div>
  </div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      step: 1,
      loading: true,
      // ...
    }
  },
  mounted() {
    this.axios
      .get(Routing.generate("app_api_get_resumes"))
      .then((response) => {
        if (response.data !== undefined) {
          this.$set(this, "loading", false);
          this.$set(this, "step", response.data.currentStep);
          let resume = response.data.entity;
          // 尝试过的常规写法：
          // this.loading = false;
          // this.step = response.data.currentStep;

          // ...更多从响应中赋值的逻辑
        }
      });
  },
}
</script>

已尝试的无效方案 #

• 直接赋值：this.loading = false、this.step = response.data.currentStep
• 使用this.$set强制更新响应式数据
• 尝试Vue.set（提示Vue未定义）
• 将.then()改为async/await写法

问题根源排查方向 #

1. 组件实例上下文丢失：虽然回调用了箭头函数，但仍需确认this指向是否为当前Vue组件实例——可在mounted开头和回调内打印console.log(this)，检查是否包含$data、$el等Vue实例属性。若this不是组件实例，可能是axios挂载异常或外部代码污染了上下文。
2. 组件未正确挂载/已被销毁：Vue DevTools看不到组件，说明实例未被Vue正确注册，或在接口请求过程中被父组件的v-if/路由切换等逻辑销毁。检查父组件是否有条件渲染当前组件的逻辑，或路由配置是否异常。
3. 响应式数据被破坏：若response.data.currentStep的类型与初始step（Number）不一致（如返回字符串"1"），会导致模板中step === 1的判断不成立，但不会导致数据本身不更新；若项目中存在Object.freeze(this)或第三方库修改了Vue响应式系统，也会导致数据无法更新。
4. axios拦截器干扰：检查全局axios拦截器是否修改了响应，或在拦截逻辑中使用普通函数改变了this指向。
5. 组件注册异常：确认当前单文件组件是否在父组件中正确引入并注册，组件名是否存在拼写错误，导致实际渲染的不是目标组件。

验证建议 #

• 在mounted钩子开头和接口回调内打印this，确认上下文正确性
• 临时注释嵌套组件<v-resume-creation-step1>，排除子组件的影响
• 将接口请求移至created钩子中尝试
• 检查response.data.currentStep的类型，确保与初始step类型一致
• 排查全局axios拦截器代码，确认无异常逻辑

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