Введение

🎯 Цель книги

Спасибо, что выбрали эту книгу!
Я действительно рад, если вы проявили хотя бы небольшой интерес к книге.
Позвольте мне сначала обозначить цель книги.

☆ Цель

• Углубить понимание Vue.js
  Что такое Vue.js? Как он устроен?
• Научиться реализовывать базовые функции Vue.js
  Попробовать реализовать базовый функционал на практике.
• Читать исходный код vuejs/core
  Понять связь между нашими реализациями и официальным кодом, и понять, как они действительно построены.

Я предоставил общий план целей, но не обязательно выполнять их все или стремиться к совершенству.
Будете ли вы читать книгу от корки до корки или выберете только интересующие вас части – решать вам.
Я буду рад, если вы найдете полезной хотя бы небольшую часть этой книги!

🤷‍♂️ Для кого предназначена эта книга

• Тем, кто имеет опыт работы с Vue.js
• Умеющим писать на TypeScript

Имея только эти два предварительных условия, никаких других знаний не требуется.
Хотя в процессе чтения книги вы можете столкнуться с незнакомыми терминами, я постарался исключить необходимость в предварительных знаниях и объяснять все по ходу дела, стремясь сделать эту книгу самодостаточной.
Однако, если вы столкнетесь с терминами, которые не должны использоваться для Vue.js или TypeScript, я рекомендую сначала изучить их из соответствующих источников.
(Достаточно базовых функций! (Не нужно глубоко погружаться))

🙋‍♀️ О чем эта книга (и автор) заботится (и чего хочет достичь)

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

• Устранение необходимости в предварительных знаниях
  Хотя это может перекликаться с разделом "Для кого предназначена эта книга", упомянутым ранее, я стремлюсь сделать эту книгу как можно более самодостаточной,
  минимизируя необходимость в предварительных знаниях и предоставляя объяснения по мере необходимости.
  Это потому, что я хочу сделать объяснения как можно более ясными для как можно большего числа читателей.
  Те, у кого есть большой опыт, могут найти некоторые объяснения несколько многословными, но я прошу вашего понимания.

• Пошаговая реализация
  Одной из целей книги является пошаговая реализация Vue.js вручную. Это означает, что книга фокусируется на практическом подходе,
  и когда дело доходит до реализации, я подчеркиваю важность построения маленькими, инкрементными шагами.
  Если быть более конкретным, речь идет о "минимизации нерабочих состояний".
  Вместо того, чтобы иметь что-то, что не будет работать, пока оно не будет завершено, цель состоит в том, чтобы оно функционировало на каждом этапе.
  Это отражает мой личный подход к кодированию – непрерывное написание нефункционального кода может быть обескураживающим.
  Даже если что-то несовершенно, всегда иметь что-то в движении делает процесс более приятным.
  Речь идет о том, чтобы испытывать маленькие победы, типа: "Да! Теперь это работает до этого момента!"

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

💡 Темы и структура этой онлайн-книги

Поскольку эта книга получилась довольно объемной, я установил этапы достижений и разделил ее на разные разделы.

• Раздел "Минимальный пример"
  Здесь Vue.js реализуется в своей наиболее базовой форме.
  Хотя этот раздел охватывает минимальный набор функций, он будет иметь дело с
  Virtual DOM, системой реактивности, компилятором и поддержкой SFC (однофайловых компонентов).
  Однако эти реализации далеки от практичных и сильно упрощены.
  Но для тех, кто хочет получить общее представление о Vue.js, этот раздел предлагает достаточное понимание.
  Будучи вводным разделом, объяснения здесь более подробны, чем в других частях.
  К концу этого раздела читатели должны чувствовать себя несколько комфортно при чтении официального исходного кода Vue.js. Функционально вы можете ожидать, что код будет примерно делать следующее...

  <script>
  import { reactive } from 'chibivue'
  
  export default {
    setup() {
      const state = reactive({ message: 'Hello, chibivue!', input: '' })
  
      const changeMessage = () => {
        state.message += '!'
      }
  
      const handleInput = e => {
        state.input = e.target?.value ?? ''
      }
  
      return { state, changeMessage, handleInput }
    },
  }
  </script>
  
  <template>
    <div class="container" style="text-align: center">
      <h2>{{ state.message }}</h2>
      <img
        width="150px"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
        alt="Vue.js Logo"
      />
      <p><b>chibivue</b> is the minimal Vue.js</p>
  
      <button @click="changeMessage">Добавить !</button>
  
      <br />
      <br />
  
      <div>
        Ввод: <input @input="handleInput" />
      </div>
  
      <p>{{ state.input }}</p>
    </div>
  </template>

• Раздел "Базовая система компонентов"
  В предыдущем разделе "Минимальный пример" была реализована базовая система компонентов, но она была примитивной.
  В этом разделе мы обогатим эту реализацию и создадим компонентную систему ближе к реальному фреймворку Vue.js.
  Конкретно, мы рассмотрим регистрацию компонентов, slots (слоты), provide / inject, жизненный цикл и т.д.

• Раздел "Базовый компилятор шаблонов"
  Как и в случае с системой компонентов, базовая система шаблонов (компилятор шаблонов и SFC) была реализована в "Минимальном примере", но была она крайне примитивной.
  В этом разделе мы обогатим эту реализацию и реализуем более продвинутые функции,
  такие как директивы (v-if / v-for), реализованные как преобразования компилятора, и поддержка компилятора для script setup.

• Раздел "Базовая система реактивности"
  В "Минимальном примере" мы реализовали простейшую систему реактивности.
  В этом разделе мы углубимся в реализацию системы реактивности Vue.js и реализуем более продвинутые функции,
  в том числе вычисляемые свойства, watchEffect, ref и т.д.

• Раздел "Базовый Virtual DOM"
  В "Минимальном примере" мы реализовали очень простой Virtual DOM, но это была чрезвычайно примитивная реализация.
  В этом разделе мы создадим более продвинутый Virtual DOM для реализации эффективного рендеринга, включая разницу между рендерингами и патчингом.

• Дополнительный раздел
  В этом разделе мы рассмотрим различные вещи, которые не вошли в основные разделы.
  Например, реализация TypeScript, DevTools и т.д.