Ключевые элементы, составляющие Vue.js

Репозиторий Vue.js

Vue.js можно найти в этом репозитории:
https://github.com/vuejs/core

Интересно, что это репозиторий для v3. Для v2 и более ранних версий вы можете найти его в другом репозитории:
https://github.com/vuejs/vue

Для целей этого обсуждения мы будем фокусироваться на основном репозитории (v3).

Основные элементы, составляющие Vue.js

Давайте сначала получим целостное представление о реализации Vue.js.
В репозитории Vue.js есть файл markdown о вкладе в проект;
если вам интересно, вы можете изучить его, чтобы получить представление о его архитектуре. (Хотя, это можно и пропустить.)

https://github.com/vuejs/core/blob/main/.github/contributing.md

В общих чертах, Vue.js состоит из следующих основных компонентов:

Runtime (Среда выполнения)

Runtime охватывает все, что влияет на фактическую работу — от рендеринга до управления состоянием компонентов.
Это относится ко всему веб-приложению, разработанному на Vue.js, которое работает в браузере или на сервере (в случае SSR). В частности, он включает:

Система компонентов

Vue.js является компонентно-ориентированным фреймворком. В зависимости от требований пользователя, вы можете поддерживаемо создавать и инкапсулировать компоненты для повторного использования.
Он также предлагает такие функции, как совместное использование состояния между компонентами (props/emits или provide/inject) и хуки жизненного цикла.

Система реактивности

Она отслеживает состояние, хранящееся компонентами, и обновляет экран при возникновении изменений.
Этот механизм мониторинга и реагирования называется реактивностью.

import { ref } from 'vue'

const count = ref(0)

// Когда эта функция выполняется, экран, отображающий счетчик, также обновится
const increment = () => {
  count.value++
}

(Разве не удивительно, как экран обновляется просто при изменении значения?)

Система Virtual DOM

Система Virtual DOM — еще один мощный механизм Vue.js. Она определяет объект JavaScript, имитирующий DOM в среде выполнения JS.
При обновлении она сравнивает текущий Virtual DOM с новым и отражает только различия в реальном DOM.
Мы углубимся в это в отдельной главе.

Компилятор

Компилятор отвечает за преобразование интерфейса разработчика во внутреннюю реализацию.
Под "интерфейсом разработчика" мы подразумеваем границу между "разработчиками, использующими Vue.js для разработки веб-приложений" и "внутренними операциями Vue".
По сути, когда вы пишете с использованием Vue.js, есть части, которые явно не являются чистым JavaScript — например, директивы шаблонов или однофайловые компоненты.
Vue.js предоставляет эти синтаксисы и преобразует их в чистый JavaScript.
Эта функция используется только на этапе разработки и не является частью фактически работающего веб-приложения. (она просто компилируется в JavaScript-код).

Компилятор имеет два основных раздела:

Компилятор шаблонов

Как следует из названия, это компилятор для части шаблона.
В частности, он обрабатывает директивы, такие как v-if или v-on, нотации пользовательских компонентов (например, ), и функциональности, такие как слоты.

Компилятор SFC

Как вы можете догадаться, это означает компилятор однофайловых компонентов (Single File Component).
Он позволяет определить шаблон, скрипт и стиль компонента в одном файле .vue.
Функции, используемые в script setup, такие как defineProps или defineEmits, также предоставляются этим компилятором.
И этот компилятор SFC часто используется вместе с инструментами, такими как Webpack или Vite.
Реализация в виде плагина для других инструментов не находится в основном репозитории.
Основная функциональность компилятора SFC находится в core, но плагины реализованы в разных репозиториях.
(Ссылка: vitejs/vite-plugin-vue)

Кстати, мы будем реализовывать реальный плагин Vite для работы нашего пользовательского компилятора SFC.

Заглядываем в директорию vuejs/core

Теперь, когда у нас есть примерное представление об основных элементах Vue, давайте посмотрим, как выглядит фактический исходный код (хотя мы просто обсуждаем директории).
Основной исходный код хранится в директории "packages".

https://github.com/vuejs/core/tree/main/packages

Некоторые из ключевых директорий, на которые стоит обратить внимание:

• compiler-core
• compiler-dom
• compiler-sfc
• reactivity
• runtime-core
• runtime-dom
• vue