Как сделать так, чтобы computed срабатывало после beforeCreate?

Question

[nastya_zholudeva]

Как сделать так, чтобы computed срабатывало после beforeCreate. Сейчас по консоле в браузере я вижу, что вызывается computed, потом beforeCreate, потом опять computed. Поэтому сделала костыль на проверку наличия данных в product. Можно ли как-то грамотнее поступить?

data() {
            return {
                product: {}
            }
        },
        computed: {
            mainPhoto: function() {
                console.log('22222');
                if (Object.keys(this.product).length > 0) {
                    function compare(a, b) {
                    if (a.sort < b.sort)
                        return -1;
                    if (a.sort > b.sort)
                        return 1;
                    return 0;
                }
                this.product.photos.sort(compare);
                   return this.product.photos[0].image
                } else {
                    return
                }

            }
        },
        beforeCreate() {
            this.$nextTick(() => {
                axios.get('http://api.selfie-store.ru/products/' + this.$route.params.id).then((data) => {
                   console.log('1111');
                    this.product = data.data;
                })
            })

        },

Comments

[lavezzi1]

а зачем дергать запрос в beforeCreate? Когда по правильному надо в created

[nastya_zholudeva]

lavezzi1, пробовала и в created. Думала, что хотя бы beforeCreate. раньше будет срабатывать

Answer 1

[Рамиль]

На самом деле по логике жизненного цикла компонентов Vue все верно.
В документации написано beforeCreate вызывается синхронно сразу после инициализации экземпляра, до настройки наблюдения за данными, механизмов слежения и событий. То есть в этот момент уже первый раз computed выполнится, но слежения за данными внутри него еще не будет.
Я тоже всегда делаю проверку в computed и мне кажется это нормально.