Чтение исходного кода: как именно это считается пониманием?
На рынке есть много статей по анализу исходного кода.Насколько я вижу, основная процедура состоит в том, чтобы разобраться в процессе и рассказать о функции каждого модуля.Большая часть всей статьи напрямую связана с исходным кодом. Не могу не задаться вопросом, действительно ли автор это понял? Почему я до сих пор ничего не понимаю после прочтения?
На самом деле исходный код фреймворка, прошедший многочисленные итерации, не подходит для непосредственного чтения новичками, потому что слишком много деталей, слишком много шума и слишком много ответвлений. Чтобы по-настоящему понять основную логику фреймворка, мы должны избавиться от кокона и восстановить чистый прототип. Так же, как в самой ранней версии jQuery было всего более 600 строк, я считаю, что основные функции Vue могут быть реализованы всего в нескольких сотнях строк. Поэтому признаком чтения исходного кода является восстановление.Чем тоньше код, тем яснее правда.
Как восстановить прототип?
Вначале процесс восстановления, который я себе представлял, заключался в том, чтобы сначала удалить, а затем демонтировать. Все сообщения об ошибках, проверка параметров и непрофильные функции были обрезаны, а 8000 строк превратились в 5000 строк. Затем снова разделите его и разделите Vue.js на util.js,Observer.js,watcher.js в соответствии с функциональными модулями…
В идеале я должен понимать исходный код, но после анатомической операции я обнаружил, что логика внутри все еще сложна, резка постоянно, логика все еще хаотична, серая линия травяной змеи, пульс в тысячи миль, даже если он изменен на более раннюю стадию, более короткая версия, все еще быстро увязшая в бесконечных деталях.
В итоге я пришел к выводу, что вместо того, чтобы восстанавливать прототип на основе исходного кода, лучше реализовать прототип с нуля, обратившись к исходному коду.
определить ядро
Версия: 2.0.4
Учитывается только версия среды выполнения, не учитывается компиляция шаблона и не учитывается рендеринг на стороне сервера.
Основные функции: реактивная привязка данных, виртуальный DOM, алгоритм сравнения, метод исправления (для обновления реального DOM).
Если вы совершенно не знакомы с приведенными выше базовыми понятиями, рекомендуется накопить некоторые базовые знания: Справочник по реактивному связываниюэта статья, о виртуальном доме и алгоритме сравнения см.видео. Конечно, это не обязательно.
Цель
На самом деле в проекте, сгенерированном Vue-cli, содержимое тега будет скомпилировано в функцию рендеринга, которая возвращает все дерево виртуальных узлов. В конечном итоге мы реализуем Vue, чтобы завершить приведенный выше пример.
Что происходит, когда вызывается новый Vue()?
Наша реализация будет ссылаться на подпрограммы исходного кода, но значительно упростит детали. Чтобы понять структуру исходного кода, лучше всего понять, что происходит за новым Vue(), отправной точкой программы.
Просто разберите поток выполнения исходного кода:
=> жизненный цикл инициализации
=> Инициализировать систему событий
=> Инициализировать состояние, обработать реквизиты, данные, вычислить...
=> начать рендеринг _mount() => _render() return vdom=> _update() => __patch__() обновить реальный DOM
Для получения более подробных инструкций см.эта статья, мы реализуем только его основную часть
Шаг 1: визуализируйте виртуальное дерево DOM в реальном DOM
Каждый узел DOM представляет собой объект узла, который содержит большое количество свойств и методов.Виртуальный DOM на самом деле представляет собой сверхлегкую версию объекта узла.
Дерево DOM, которое мы хотим сгенерировать, выглядит так:
Атрибуты параметра данных см.официальная документация
Затем мы пройдем через взаимные вызовы методов createElm и createChildren все виртуальное дерево узлов, создадим реальное дерево узлов DOM и, наконец, заменим его точкой монтирования.
Шаг 2: Измените данные, выполните алгоритм сравнения и замените измененные части на настоящий DOM.
Логика алгоритма diff относительно сложна и может быть извлечена отдельно для исследования.Поскольку наша цель — понять основную логику фреймворка, при реализации кода рассматривается только самый простой случай.
Шаг 3: Отзывчивая обработка данных, когда данные изменяются, метод обновления выполняется автоматически.
Каждое свойство в данных будет рассматриваться как свойство доступа, и каждое свойство будет поддерживать свой собственный объект dep в замыкании для хранения зависимостей свойства. Когда свойству присваивается новое значение, запускается метод set, и все зависимости уведомляются об обновлении.
Прогрессивные функции Vue упрощают начало работы, и я считаю, что постепенное отображение процесса реализации логики фреймворка также облегчит понимание.