Class 基于 vue 组件 属性 定义：构造函数 vs. getter / setter vs. 挂载生命周期

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 钩子而不是 mounted:

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

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

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

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

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

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

注2：TypeScript会在编译后将msg声明移动到构造函数并且Vue.js 似乎与它配合得很好。但它仍然是未指定的，最好避免。