Хуки жизненного цикла Vue.js

[PYXRU]

Я правильно понял, что данные с api запрашивать выгоднее всего на created(), а не mounted()?

[kolesoffac]

Все зависит от цели. Но в основном лучше на создании, съэкономит немного времени.

[mmMike]

Ради интереса попробовал в рабочем проекте активировать загрузку в created() (было в mounted).
Результат ожидаемый. Разницы не заметил никакой.
Все равно загрузка через axios и результат приходит всяко после того как все "отрисовано".

Так все же, а в чем суть и причина этой рекомендации?

[kolesoffac]

Причина: запрос ушел, пошел рендер, а не наоборот. Я же не сказал, что производительность подскочит на 200%, я только хотел сказать, что в разрезе последовательности выполнения лучше начать запрос данных как можно раньше.

[mmMike]

Ради интереса посмотрел dt между created и mounted для одной и той же страницы в разных браузерах (последние версии на Windows) на одном компе:

• Chrome — среднее 180ms. деривация 5ms
• IE 11 — среднее 400ms. деривация 15ms
• Opera — 152ms. деривация 4ms
• FF — 300ms. деривация 10ms
  Это на относительно дохленьком компе для средне насыщенной страницы (таблица + диаграммы и пр… по мелочи).

Субъективно разница в 0.5 сек не улавливается. Поэтому и запихивал загрузку ресурсов в уже вызываемый (для тонкой настройки) блок mounted.

[lexxor]

Важнее разница между created и mounted в порядке вызова этих хуков в компонентах-родителях и детях. mounted родителя вызывается после mounted ребенка. Соотвественно если вы в mounted родителя меняете что то, что приводит к ререндеру ребенка (назначаете дефолтные значения фильтров для списка, например), компоненты-дети будут отрисованы дважды. Это редко где освещается, но иногда приводит к неожиданным последствиям.
подробнее medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

А вообще не очень понятно, зачем вам так часто что то в mounted приходится тонко настраивать. У меня в среднего размера проекте этот хук используется в двух местах, где пришлось поковырять dom через ref — это внешние зависимости плохо совместимые с vue. И они спрятаны в переиспользуемых компонентах.

[mmMike]

Часто, это я сгоряча… фактически настройки то же только в паре месте пришлось делать.
Для для диаграмм и графиков (сhart.js).
Возможно не правильный способ. Но я с ходу самый простой что бы понять размер и подкорректировать размеры canvas под фактический размер ($el.getBoundingClientRect())
Правильный не правильный… но некогда было искать другие решения. работает и ладно.

[HAGer2000]

Порядок вызова mounted не определен
То, что mounted родителя вызовется после ребенка, — это скорее всего. но не факт

[Serg_de_Adelantado]

Основное применение created, которое доводилось встречать — SSR, для загрузки данных при выполнении скрипта на стороне сервера.

[kolesoffac]

Автор, подскажите, пожалуйста, чем ваша статья кардинально отличается от достаточно качественной документации на официальном сайте vue? ru.vuejs.org/v2/guide/instance.html

[Fragster]

Судя по вопросам на тостере — никто не читает документацию :)

[kuftachev]

Вот меня тот же вопрос мучает!
Почему люди не пытаются принести какую-то свою "добавочную стоимость"? Встречал даже курсы, включая платные, которые тупо читают документацию в вольном стиле.

Ещё видел курсы по книге.

Также интересно, что смотрел штук под 10 книг по Angular 2+ и не одна не даёт ничего больше, чем документация.

[marsdenden]

пожалуй, тем, что в данном случае рассмотрен один аспект, а именно — использование хуков. Вот мне сегодня, допустим, очень даже в тему зашло. И да, гораздо более удобная форма подачи материала, без гиперссылок — почитай там, диаграмму посмотри здесь… Если бы документацию писали так же — не было бы вопросов. Так что вопрос качества — относительный вопрос.

[HAGer2000]

Применение mounted вместо created оправдано даже при получении данных для компонента, если используется ssr. Злоупотребление created в ssr приводит к утечкам памяти. Так что надо поаккуратнее с этим