Разница между Runtime-Compiler и Runtime-Only

Vue.js
Разница между Runtime-Compiler и Runtime-Only

Когда мы используем команду vue init для создания каркаса, у нас будут следующие параметры.

  • Runtime + Compiler
  • Runtime-only

Так в чем же между ними разница, сегодня мы обсудим

Во-первых, мы создаем леса Vue двумя способами. Давайте посмотрим на разницу между main.js из двух

Разница очевидна: в экземпляре Vue параметрами проекта, созданного компилятором среды выполнения, являются компоненты и шаблон, а в проекте, созданном только компилятором времени выполнения, параметром является функция рендеринга, в этом их самая большая разница.

Процесс рендеринга компонентов

Во-вторых, давайте посмотрим, как компоненты отображаются на странице, что играет ключевую роль в нашем понимании вышеперечисленных проблем.

шаблон --> аст --> рендеринг --> vDom --> реальный дом --> страница

  • ast: абстрактное синтаксическое дерево
  • вДом: Виртуальный Дом

Можно обнаружить, что шаблон в конечном итоге будет отображаться как функция рендеринга, запомните этот вывод.

runtime-only

  • Когда мы используем только время выполнения, нам нужно использовать инструмент загрузчика webpack для.vueФайл скомпилирован в JavaScript, потому что это делается на этапе компиляции, поэтому он содержит только код Vue.js времени выполнения, поэтому размер кода будет меньше.

  • в воле.vueКогда файл скомпилирован в файл JavaScript, шаблон шаблона в компоненте будет скомпилирован вrenderфункция, поэтому мы получаемrenderверсия функции. Таким образом, он работает без компиляции, и компиляция выполняется в автономном режиме.

  • шаблон пройдетvue-template-compilerПреобразовать в функцию рендеринга

runtime-compiler

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

В заключение

только во время выполнения:Когда шаблон упакован, он скомпилирован в функцию рендеринга.

компилятор среды выполнения:Во время выполнения шаблон компилируется

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

Рекомендуется собирать проект только для среды выполнения.