Vue组件结合TypeScript时状态更新失效问题求助

看起来你遇到的核心问题是类属性没有被Vue响应式系统正确注册，导致_isTouched在setter中变成undefined，同时v-if无法触发预期的重新渲染。

为什么会出现这个问题？ #

在使用vue-property-decorator的Vue Class Component中，普通的类属性不会自动被Vue实例化并加入响应式系统。你直接声明的_isTouched: boolean = false只是类的私有属性，并没有挂载到Vue实例上，所以当你在setter中尝试通过this._isTouched访问它时，自然会得到undefined。

修复方案 #

你有两种简单的方式来让_isTouched成为响应式数据：

方案1：使用@Data装饰器（推荐）

首先导入Data装饰器，然后用它标记_isTouched，这样Vue会自动将其注册为响应式实例属性：

<template>
  <div v-if="selectedProgramItem">
    {{ isTouched }}
    <span v-if="isTouched">Unsaved changes</span>
    <input type="text" class="form-control" v-model="selectedProgramItem.title" />
    <button @click="touch()">Touch object</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Data } from 'vue-property-decorator';
import { ProgramItem } from '@/entities/ProgramItem';

@Component
export default class ProgramEditItemPane extends Vue {
  @Prop() private selectedProgramItem?: ProgramItem;
  
  @Data() private _isTouched: boolean = false;

  private get isTouched(): boolean {
    return this._isTouched;
  }

  private set isTouched(val: boolean) {
    this._isTouched = val; // 现在this._isTouched可以正常访问了
  }

  private touch() {
    this.isTouched = true;
  }
}
</script>

方案2：通过data()方法声明属性

如果你不想使用装饰器，也可以在类中手动定义data()方法，返回需要响应式的属性：

<template>
  <!-- 模板部分不变 -->
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ProgramItem } from '@/entities/ProgramItem';

@Component
export default class ProgramEditItemPane extends Vue {
  @Prop() private selectedProgramItem?: ProgramItem;

  data() {
    return {
      _isTouched: false
    }
  }

  private get isTouched(): boolean {
    return this._isTouched;
  }

  private set isTouched(val: boolean) {
    this._isTouched = val;
  }

  private touch() {
    this.isTouched = true;
  }
}
</script>

额外优化建议 #

如果你的getter/setter没有额外的逻辑（比如验证、副作用），其实可以直接简化代码，去掉单独的_isTouched，直接用响应式的isTouched属性：

<template>
  <div v-if="selectedProgramItem">
    {{ isTouched }}
    <span v-if="isTouched">Unsaved changes</span>
    <input type="text" class="form-control" v-model="selectedProgramItem.title" />
    <button @click="touch()">Touch object</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Data } from 'vue-property-decorator';
import { ProgramItem } from '@/entities/ProgramItem';

@Component
export default class ProgramEditItemPane extends Vue {
  @Prop() private selectedProgramItem?: ProgramItem;
  @Data() private isTouched: boolean = false;

  private touch() {
    this.isTouched = true;
  }
}
</script>

这样代码更简洁，同时完全满足你的需求。修复后，点击按钮时isTouched会被正确设置为true，v-if会触发重新渲染显示提示文本，Vue开发者工具也能正常看到这个属性的状态。

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