Начните с входного файла и проанализируйте реализацию исходного кода Vue.

внешний интерфейс GitHub исходный код Vue.js

Why?

В Интернете есть большое количество существующих статей по анализу исходного кода Vue, но зачем мне это делать? потому что я думаю纸上得来终觉浅,绝知此事要躬行.

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

  • Как v-for key реализует стратегию «повторного использования на месте»
  • Как выполняется обнаружение обновления массива
  • Почему можно установить динамически добавлять адаптивные свойства корневого уровня
  • Почему Vue может поддерживать Weex через платформы, а позже mpvue
  • ...

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

какие?

Всего он разделен на 10 основных частей, которые будут записываться в дальнейшем. Давайте сначала посмотрим на обзор:

Затем давайте посмотрим на базовый каталог:

Начните со входа, интерпретируйте исходный код Vue (1) — Создание

Начните со входа, интерпретируйте исходный код Vue (2) — история нового Vue

Начните со входа, интерпретируйте исходный код Vue (3) - initMixin Часть 1

Начните со входа, интерпретируйте исходный код Vue (3) - initMixin, часть 2

Начните со входа, интерпретируйте исходный код Vue (4) — реализуйте базовую двустороннюю привязку Vue.

Начните со входа, интерпретируйте исходный код Vue (5) — внутренняя реализация $mount

Запустите запись, интерпретируйте исходный код Vue (6) — внутренняя реализация $mount — скомпилируйте функцию синтаксического анализа для генерации AST

Запустите запись, интерпретируйте исходный код Vue (7) - внутренняя реализация $mount --- скомпилируйте узел метки оптимизации

Начните со входа, интерпретируйте исходный код Vue (8) — внутренняя реализация $mount — скомпилируйте, сгенерируйте, сгенерируйте функцию рендеринга.

Начал впуска, интерпретирует источник Vue (9) - $ Mount Внутренняя реализация --- Представление функции-> Vnode

Начните со входа, интерпретируйте исходный код Vue (10) - внутренняя реализация $mount --- patch

End?

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

наконец:

гитхаб-адрес

Часть демонстрации исходного кода