Синхронное подключение VueJS?

Question

[goodw84]

1. Подключаю в head VueJS:

2. В конце страницы подключаю app.js

При загрузке страницы сначала отображаются {{message}} шаблоны VueJS, а потом уже отрабатывает Vue, заменяя их на значения и т.д.

Браузеры: Яндекс.Браузер и Google.Chrome

Как подключать Vue, чтобы он отрабатывал до отрисовки страницы?

Answer 1

[Stopy]

Vue в любом случае заработает после отрисовки dom дерева. Как вариант, сделай body display:none, а после загрузки vue уже делай рабочую область видимой. Иначе неотрендереный результат все равно будет видно

Comments

[goodw84]

Я могу все компоненты Vue скрывать изначально, а потом уже показывать после того, как отработал Vue. Просто думал может какое-то более изящное решение есть, "изкаропки".

[Stopy]

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

[goodw84]

Еще один вариант — упаковывать все компоненты и монтировать их вручную в самом конце.

Answer 2

[Николай Парахневич]

При использовании шаблонов в DOM может возникнуть «вспышка нескомпилированных шаблонов»: пользователь может видеть необработанные теги усов, пока смонтированный компонент не заменит их отображаемым содержимым.
Чтобы избежать такого поведения, можно использовать директиву v-cloak. v-cloak останется на элементе до тех пор, пока не будет смонтирован соответствующий экземпляр компонента. В сочетании с правилами CSS, такими как
[v-cloak] { display: none }
, его можно использовать для скрытия необработанных шаблонов до тех пор, пока компонент не будет готов