基于类的 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>

---

在 Mounted 生命周期中定义属性：

模板参考：

<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优于其他方法。我建议的唯一改变是使用createdhook 而不是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如何在没有实际调用构造函数的情况下执行？这个品牌的推理真的很奇怪。

注 1：对于 Vue.js 版本 3，建议使用官方基于类的组件。因此，这种情况可能在不久的将来发生改变。

注 2：TypeScript 会在编译后将msg声明移至构造函数，Vue.js 似乎可以很好地使用它。但这仍然是未指定的，最好避免。