3

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

在构造函数中定义属性：

模板参考：

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

问题：

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

1 回答 1

6

第二种使用方法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 似乎可以很好地使用它。但它仍然是未指定的，最好避免。

于 2019-03-07T18:41:10.587 回答