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

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

1 голос
/ 07 марта 2019

Мне просто интересно, какой способ является наиболее надежным для определения свойств, которые должны генерировать выходные данные в шаблоне.

Определение свойства в конструкторе:

Ссылка на шаблон:

<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 Ответ

2 голосов
/ 07 марта 2019

Второй подход использования mounted предпочтительнее остальных подходов. Единственное изменение, которое я бы предложил, - это использование created hook вместо 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 : для версии 3 Vue.js официальные компоненты на основе классов предложил. Таким образом, это может измениться в ближайшем будущем.

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

...