基于类的Vue组件属性定义：构造函数与getter / setter与已安装生命周期

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');
  }
}

通常，对于简单属性，可以在声明时直接分配一个值。当您的任务不简单时，请使用创建的内容。

此外，在编写基于类的组件时，我们实际上并没有使用构造函数。背后的原因是，基本上Vue.js组件是基于对象的。 @Component装饰器最终使组件的行为类似于基于对象的行为。

此外，如果您查看Vue.js组件生命周期方法，则没有构造函数的地方。初始方法为beforeCreate-> data-> created-> mounted，依此类推。 beforeCreate 如何在不实际调用构造函数的情况下执行？这么说真的很奇怪。

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

注释2 ：TypeScript将在编译后将msg声明移至构造函数，Vue.js似乎可以很好地工作。但是仍然没有明确规定，最好避免。