Определение свойства компонента vue на основе классов: конструктор против геттера / установщика против смонтированного жизненного цикла

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 Decorator в конечном итоге заставляет компонент вести себя как объектно-ориентированный.

Кроме того, если вы посмотрите на методы жизненного цикла компонента Vue.js, то здесь нет места для конструктора. Начальные методы beforeCreate -> data -> created -> mounted и так далее. Как выполнить beforeCreate без фактического вызова конструктора? Это действительно странно рассуждать.

Примечание 1: Для версии 3 Vue.js предлагаются официальные компоненты на основе классов. Таким образом, это может измениться в ближайшем будущем.

Примечание 2: TypeScript будет двигаться msgобъявление вконструкторе после компиляции и Vue.js, кажется, хорошо с ним работают. Но это все еще не определено и лучше избегать.