Vue: Как избежать использования setTimeout в mount () для ожидания доступности свойств?

Question

Я часто использую setTimeout, чтобы дождаться загрузки исходных данных и их доступности в моих Vue компонентах. Часто я пытаюсь получить доступ к исходным данным, но они не будут готовы. Пример:

data: {
  return() {
     name: null
  }
},
props: {
    otherName: {type: String}
},
mounted() {

     if (this.otherName == "Bob" {
        // do something
     }
}

Будет ли работать этот шаблон? Я думал об этом, но как часто это будет гореть? Я бы неоднократно стрелял из этого? По крайней мере, с установленным, я знаю, что это происходит ОДИН РАЗ и только один раз.

computed: {
   getOtherName() {
       return this.otherName;
   }
},
watch: {
   getOtherName(newValue, oldValue) {  
       if (oldValue != null && newValue == "Bob) {
          //do something -- the prop will be null though so I use a setTimeout to wait for it to be available and not null
       }
   }
}

Answer 1

Наблюдаемые свойства будут активироваться каждый раз при обнаружении изменения свойства, поэтому это решение не совсем готово. Хорошо, что вы уходите от использования тайм-аутов, потому что это просто глупо, тем более что вы побеждаете цель Vue быть фреймворком MVVM.

Если вы хотите иметь инициализацию шаг, то у вас есть два разумных варианта:

1. Вы можете смонтировать компонент заранее, а затем отслеживать флаг initialized, чтобы определить, выполнили ли вы этот шаг инициализации.
2. Вы можете отложить установку компонента до тех пор, пока ваши данные не будут готовы в первую очередь.

Вариант 1 будет выглядеть примерно так:

data() {
    return {
        initialized: false
    };
},
watch: {
    getOtherName(newValue, oldValue) {
        if(this.initialized || oldValue !== null) {
            return;
        }

        // Perform initialization logic.

        this.initialized = true;
    }
}

Вариант 2 будет выглядеть примерно так вот так:

// HTML template
<my-component v-if="data_source !== null" :otherName="data_source"></my-component>

// JS
mounted: {
    // Perform initialization logic.
}