Typescript Vue@Watch未在布尔值更改时触发

我正在尝试在vue-ts中使用监视功能。 我已经设置了一个监视函数，每当布尔变量值发生变化时就会触发， 它根本不着火，我也不知道为什么

我的代码：

这是数据声明

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { CSSModule } from "@/Services/Modules/CSSModule";

@Component({})
export default class CommentCard extends Vue {
  @Prop() comment!: Object;
  @Prop() cmEditor!: Object;
  @Prop() nextCommentDistance!: number;
  @Prop({ default: 300 }) width!: number;
  @Prop() commentIndex!: number;
  private initialHeight: string;
  private textMarker: Object;
  private cssModule: Object;
  private isFocused: boolean;

这是函数

  @Watch("isFocused")
  highlightComment() {
    if (this.textMarker) {
      this.textMarker.clear();
    }
    const css = this.isFocused
      ? "background-color: " +
        this.cssModule.hexToRgba(this.comment.typeColor, 0.5)
      : "background-color: " +
        this.cssModule.hexToRgba(this.comment.typeColor, 0.8) +
        "; box-shadow: 5px 5px 4px rgb(23,24,26)";
    let locations = this.comment.serialize.replace("N", "");
    locations = locations.split(",");
    let startLocation = locations[0].split(":");
    let endLocation = locations[1].split(":");
    this.textMarker = this.cmEditor.markText(
      { line: parseInt(startLocation[0]), ch: parseInt(startLocation[1]) },
      { line: parseInt(endLocation[0]), ch: parseInt(endLocation[1]) },
      {
        css: css,
      }
    );
  }

它根本不会被调用，我甚至在挂载后用一个按钮改变isfocus的值，但它仍然会触发手表

---

谢谢。

您必须初始化您的属性，使其具有反应性

而不是：

private isFocused: boolean;

使用

您应该为Vue应用程序中的每个属性执行此操作。请注意，您可以使用

null

；只要属性不是未定义的，它就可以工作

---

有关更多信息，请参阅：

您可以通过删除

private

修饰符来尝试吗？它仍然不起作用我发现，问题是isFocused没有启动值，给它一个初始值就可以了

private isFocused: boolean;

private isFocused: boolean = false;