предисловие

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

Особенности исходного кода Vue 3.0:

четкая структура
Короче говоря, с помощью метода рабочей области пряжи функциональный модуль отделяется и делится на папки в соответствии с полем рабочей области в package.json (с package.json, прыгайте, если вы не понимаете:документация по пряже), каждая функция может скомпилировать соответствующий файл модуля с помощью yarn dev, другими словами, адаптивный модуль vue 3.0 можно полностью извлечь и использовать для других проектов, что было невозможно в vue 2.0 до
Рефакторинг машинописного текста
Раньше vue 2.0 использовал Flow для проверки кода статического типа. Позже выяснилось, что команда была ненадежной и проект Flow был незавершенным. Он не мог конкурировать с большим TS от Microsoft. market, так что на этот раз он тоже безжалостно рефакторинг с помощью Typescript.
Я использовал vue + TS в проекте раньше, но я всегда чувствую, что мое использование очень простое, и я никогда не касался высокоуровневого использования, такого как парадигмы.В этом исходном коде много лучших практик TS, высокоуровневые уровень использования TS использование. Таким образом, глядя на этот исходный код, вы также можете одновременно хорошо изучить TS, убивая двух зайцев одним выстрелом.
Преобразование прокси
Те, кто видел исходный код 2.0 или иметь небольшое понимание адаптивного принципа Vue, знают, что 2.0 использует объект.defineProperty для угона данных. На этот раз он также напрямую трансформируется в прокси (синтаксис ES6). Производительность не похожа на Object.defineProperty, который должен пройти все, как только он появится. Производительность еще лучше. Мы будем продолжать обсуждать это ниже.

Как эффективно читать исходный код vue 3.0:

Должен видеть
Package.json основного каталога, каждый проект должен сначала просмотреть этот файл. Поскольку это позволяет нам понять, какие сценарии поддерживает исходный код, например test, мы можем запустить тестовый сценарий с помощью yarn test. Поле workspace представляет содержимое рабочей области, то есть расположение кода функционального модуля, так что много говорить не буду.
Есть также некоторые дополнительные знания, связанные с процессом разработки релиза переднего плана, которые также могут быть применены к вашим собственным проектам.
Сначала сосредоточьтесь на основном процессе функционального модуля
Концепция рабочего пространства упоминалась ранее. Мы можем начать с одного из функциональных модулей и посмотреть на файл основного процесса. Когда мы сталкиваемся с обратным вызовом функции в середине, мы сначала смотрим на буквальное значение. После прочтения основного процесса мы можно зайти и посмотреть по одному. Например: начните с реактивного основного процесса reactive.ts в папке реактивности.
Документация по грамматике
Поскольку существует множество грамматик TS/ES6, рекомендуется просмотреть документы TS и грамматики ES6.Если вы встретите какие-либо грамматики, которых не знаете, ознакомьтесь с ними.
yarn dev
Отладьте исходный код, скомпилируйте и сгенерируйте соответствующие файлы и напишите html-импорт для проверки — об этом я расскажу в следующем разделе.

текст

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

грамматически, используя концепцию универсального интерфейса TS

Что такое дженерики?Это широко используемая концепция в языках бэкенда ООП, то есть на следующем рисунке, которая может быть выведена из буквального значения: Универсальный, неопределенный тип. Какой тип передается, какой тип будет использоваться позже.Например, если Set передается в типе Number, входной параметр метода add также должен быть типа Number.
Почему он называется интерфейсом, потому что ядро TS инкапсулирует Set Map WeakSet WeakMap ES6 и записывает его в файл объявления TS (.d.ts), чтобы TS мог выполнять вывод типов и статическую проверку для этих типов.

семантически, в основном для создания targetMap WeakMap, в котором хранятся зависимости Причина, по которой здесь используется WeakMap, заключается в том, что все объекты, на которые ссылается имя ключа WeakMap, являются слабыми ссылками, то есть механизм сборки мусора не учитывает ссылку и не влияет на счетчик ссылок. очищается, сборщик мусора автоматически освобождает память объекта. Это подходит для этого сценария: вам нужно сохранить проксированный целевой объект. После того, как ссылка на другие целевые объекты будет очищена, targetMap здесь также должен автоматически очистить объект, что помогает предотвратить утечку памяти.
Цель состоит в том, чтобы создать следующий формат: какой конкретный общий ReactiveEffect Dep нужно увидеть в effect.ts, а теперь сосредоточимся на этой структуре.

{
  target:{
    key: Dep  
  }   
}

посмотри на следующую часть

Перевод аннотации исходного кода здесь заключается в том, что эти 4 слабые карты хранят сопоставление исходных данных с наблюдателями.Обратите внимание, что символ представляет двунаправленность, то есть исходные данные -> наблюдатель, наблюдатель -> исходные данные.
Почему здесь хранить двустороннюю, или долженОбмен пространственной сложностью на более эффективную временную сложностьУчтите, поскольку временная сложность этого приобретения хранилища составляет O(1), и вы также можете получить некоторые другие преимущества, такие как некоторые встроенные методы с отличной производительностью.

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

Далее основной процесс

Реактивный метод, выставленный внешнему миру, — это проксирование. Здесь функция только для чтения специально обрабатывается для данных только для чтения. Здесь необходимо оценить значение. Если значение является реактивным прокси, реактивная версия будет возвращена напрямую. По сути, последний основной шаг проксирования — это функция createReactiveObject.

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

Наконец, есть некоторые функции, которые подвергаются воздействию внешнего мира. Буквальный смысл должен быть понятен. Здесь обратите внимание на получение исходных данных. Наконец, наблюдаемый оператор напрямую или оператор. Есть две возможности. Один не наблюдаемый белый изолист, который упоминается выше., один является основным типом данных

Последние слова

В этом разделе в основном рассказывается об отзывчивых основных файлах и основном процессе.Содержание не сложное.Если у вас есть какие-либо вопросы, вы можете оставить сообщение ниже и обсудить друг с другом. В следующем разделе мы углубимся в файл effect.ts, который также является сложным для понимания моментом в исходном коде, и приложим некоторые инженерные приемы в исходном коде.