Опциональность $refs

[shining-mind]

Когда мы используем рефы, к ним по умолчанию стоит относится как к опциональным - их может не быть на определенных этапах жизненного цикла компонента.

В связи с этим возникает вопрос, как гарантировать, что реф существует? Ниже рассмотрим следующие варианты:

await waitRef

const el = await this.waitRef('$el');
el.foo();

Плюсы:

• позволяет дождаться элемент

Минусы:

• создает микротаску
• не гарантирует, что после выполнения await el будет на странице

waitRef().then

this.waitRef('$el').then((el) => el.foo());

Плюсы:

• позволяет дождаться элемент
• then выполняется синхронно, если возможно
• гарантирует наличие $el

Минусы:

• порождает лапшекод

optional

this.$refs.$el.unwrap().foo();

Плюсы:

• работает синхронно
• гарантирует наличие $el

Минусы:

• зашумление кода
• при неправильном использовании будет получен exception, который может прервать выполнение программы
• не позволяет дождаться элемента

проверка на null

const el = this.$refs.$el;

if (el != null) {
  el.foo();
}

Плюсы:

• гарантирует наличие $el

Минусы:

• бойлерплейт
• не позволяет дождаться элемента

декоратор wait

@wait({ref: '$el'})
method() {
  // только внутри метода с декоратором wait
  this.getRef('$el').foo();
}

Плюсы:

• позволяет дождаться элемент
• гарантирует наличие $el

Минусы:

• нужен отдельный геттер для $refs, чтобы обращаться к $el в рамках метода
• метод не должен иметь асинхронный операций