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

【问题标题】：Initialised non-reactive members in Typescript Vue classTypescript Vue 类中初始化的非反应性成员
【发布时间】：2020-03-24 07:10:58
【问题描述】：

使用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 遍历对象并用 getter 替换所有字段，这些字段在设置时通知 Vue。它深深地做到了这一点 - 即它递归到子对象中。

我经常想在类中存储一些不是反应性的数据，因为添加反应性非常慢。

我知道的唯一方法是使字段未定义：

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

但这很糟糕，因为你必须到处检查undefined，或者使用public foo!: number，并冒着类型错误的风险。并且该字段未初始化！

有没有办法让一个非反应性的初始化字段？

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

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

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

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

foo: ClassName;

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

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

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

【讨论】：