Question

使用vue-class-component可以将Vue组件定义为Typescript类，如下所示：

import Vue from "vue"
import Component from "vue-class-component"

@Component({})
export default class MyComponent extends Vue {
  public foo: number = 123;
  public bar: string = "123";
}

所有成员变量变为反应性的。 Vue遍历对象，并用设置了Vue的getter替换所有字段。它会做得很深-即递归到子对象中。

通常我想在不响应的类中存储一些数据，因为添加响应性很慢。

我知道的唯一方法是使该字段不确定：

@Component({})
export default class MyComponent extends Vue {
  public foo?: number;
  public bar?: string;
}

但是很糟糕，因为那样一来，您就必须在各处检查undefined，或者使用public foo!: number和风险类型错误。而且该字段尚未初始化！

有没有办法让初始化字段不响应？

Answer 1

我知道初始化字段的唯一方法是将其设为只读：

get foo(): string { return 'hello' };

您还可以在创建的生命周期挂钩期间将属性分配给属性，这通常是我采用的方法：

foo: ClassName;

created(){
    this.foo = new ClassName();
};

但是，如果您希望具有许多可以初始化的可分配属性（非反应性的），则使用不扩展Vue的单独类可能更合适。

如果我需要与视图无关的更复杂的对象，因此不需要进行反应，那么我经常这样做。

Typescript Vue类中的初始化非反应成员

1 个答案: