typescript - 基于类的vue组件属性定义: constructor vs. getter/setter vs. mounted生命周期

Question

我只是想知道哪种方式最可靠地定义属性，应该在模板中生成输出。

在构造函数中定义属性:

模板引用:

<h1>{{msg}}</h1>

属性定义:

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  @Component
  export default class Test extends Vue {
    protected msg: string;
    public constructor() {
      super();
      this.msg = 'Today\'s date ' + moment().format('YYYY/MM/DD');
    }
  }
</script>

在浏览器中输出:

<h1>Today's date 2019/03/07</h1>

---

在挂载生命周期中定义属性:

模板引用:

<h1>{{msg}}</h1>

属性定义:

export default class Test extends Vue {
  protected msg: string = '';
  mounted() {
    this.msg = 'Today\'s date ' + moment().format('YYYY/MM/DD');
  }
}

在浏览器中输出:

<h1>Today's date 2019/03/07</h1>

---

通过get和set定义属性，在构造函数中设置值:

模板引用:

<h1>{{msgText}}</h1>

属性定义:

export default class Test extends Vue {
  protected msg: string = '';
  public constructor() {
    super();
    this.msgText = 'Today\'s date ' + moment().format('YYYY/MM/DD');
  }
  get msgText(): string {
    return this.msg;
  }
  set msgText(msg:string) {
    this.msg = msg;
  }
}

在浏览器中输出:

<h1>Today's date 2019/03/07</h1>

---

问题:

• 所有三种方式都会产生相同的输出。是否有黄金法则/最佳实践、属性应该如何定义以及在哪个生命周期中定义？
• 属性是在构造函数中还是在挂载生命周期中定义的，有区别吗？

Answer 1

使用 mounted 的第二种方法优于其他方法。我建议的唯一更改是使用 created Hook 而不是 mounted:

export default class Test extends Vue {
  protected msg: string = '';

  created() {
    this.msg = 'Today\'s date ' + moment().format('YYYY/MM/DD');
  }
}

一般对于简单的属性，可以在声明的时候直接赋值。当您的作业不简单时使用 created。

此外，我们在编写基于类的组件时并没有真正使用构造函数。背后的原因是 Vue.js 组件本质上是基于对象的。 @Component 装饰器最终使组件表现得像基于对象的。

此外，如果您查看 Vue.js 组件生命周期方法，就会发现没有构造函数的位置。初始方法是beforeCreate -> data -> created -> mounted 等等。 beforeCreate 如何在没有实际调用 constructor 的情况下执行？这个 make 真的很奇怪。

注意 1:对于 Vue.js 版本 3，官方基于类的组件是建议的。因此，这可能会在不久的将来发生变化。

注意 2:TypeScript 会在编译和 Vue. js 似乎与它配合得很好。但它仍然是未指定的，最好避免。