基于类的 vue 组件属性定义：构造函数 vs.getter/setter vs.mounted 生命周期

Posted 2023-02-23

【中文标题】基于类的 vue 组件属性定义：构造函数 vs.getter/setter vs.mounted 生命周期

【英文标题】：Class based vue component property definition: constructor vs. getter / setter vs. mounted lifecycle

【发布时间】：2019-07-29 17:25:06

【问题描述】：

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

在构造函数中定义属性：

模板参考：

<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>

---

问题：

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

【参考方案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。

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

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

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

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

【讨论】：

我等不及第 3 版了。我希望您允许 TypeScript 完成所有繁重的工作，使 javascript 成为一种面向对象的语言，而不是将您自己的面向对象的黑客技术叠加在 JavaScript 之上。