Автор этой статьи:Хуагошань Руиге
what
Всем привет, сегодня я рекомендую вам лучший инструмент для изучения исходного кода vue3
Это также учитель Руан Ифэн.Еженедельный выпуск 144рекомендуется в
Конечно, автором являюсь я, и я также являюсь автором этой библиотеки.
Далее я объясню, почему эта библиотека была сделана в первую очередь, и как эту библиотеку следует есть.
Видеоверсия для просмотра: использование подробного руководства
why
Vue3 в настоящее время является самой популярной технологией.Помимо того, как научиться ее использовать, каждый должен захотеть углубиться в исходный код, чтобы увидеть, как реализованы эти функции nb, или повысить свою основную конкурентоспособность, понять принципы и пройти собеседование. пора ставить 13
Но когда мы откроем исходный код vue3, вы обнаружите, что кода очень много. С чего начать чтение этого исходного кода. Хотя читабельность кода vue3 очень высока, он не выдерживает большого объема кода! ! !
Например, в renderer.tsbaseCreateRendererФункция имеет целых 1800 строк кода.
действительно лысый
Студенты, впервые увидевшие эту функцию, должны быть в замешательстве, что мне делать? Можно ли еще спасти мои волосы? Может быть, в это время многих студентов уговорили бросить (по-тихому закрыли vscode)
Ты про себя -_-!
Для такого большого количества кода мы можем использоватьразделяй и властвуйИдея снести маленькое, а потом ломать по одному
На самом деле, если мы внимательно проанализируем исходный код, вы обнаружите, что существует множество логик, которые имеют дело с пограничными случаями или имеют дело только со средой разработки.Эти логики не нужно учитывать при понимании основной логики vue3. .
Например, логика этих красных ящиков:
Все они связаны с поведением в среде разработки, когда мы понимаем основную логику, эти моменты можно игнорировать в первую очередь.
Я не говорил, что эти логики не важны, но вы можете понять их позже. Сфокусируйтесь сначала
Может ли быть такая библиотека, которая включает только основную логику, убирает неосновную логику и делает код более читабельным? Можно лучше понять?
Фактически, в сообществе будет такой тип библиотеки, который реализует только основную логику библиотеки, позволяя учащимся быстрее понять основную логику библиотеки, например, мини-версия.
Но такой мини версии в сообществе я не нашел, поэтому просто засучил рукава и надел на себя
для сообщества
На самом деле, чтобы позволить студентам быстро понять основную логику vue3 на основе mini-vue, я сосредоточился на двух вещах в коде.
подробные примечания
К каждому конкретному коду добавляются подробные комментарии, чтобы каждый мог быстрее понять поведение кода
Визуализированный запущенный процесс
Я дал console.log для каждого ключевого узла пути, таким образом, вам нужно только открыть консоль отладки, чтобы увидеть подробный запущенный процесс, и когда вы хотите отладить код, вы можете быстро передать console.log, чтобы найти конкретный код
для себя
С моей точки зрения, после прочтения кода, помимо организации его в статью, есть лучший способ проверить, действительно ли я его осваиваю
Это реализовать функцию самому, что также является огромным выигрышем для меня. Потому что если вы хотите реализовать эту функцию, вы должны сначала понять ее, а затем уже писать код.
how
Далее позвольте мне представить, как использовать эту библиотеку.
скачать
Сначала вам нужно скачать библиотеку локальнобиблиотечный портал
git clone https://github.com/cuixiaorui/mini-vue.git
README
В README я подробно записал функции, которые были реализованы до сих пор.
и итоговая карта мозга
Каждый может связать воедино весь основной процесс на основе карты мозга.
Структура проекта
- например разместить демо
- lib - это файл после сборки (файл, который демо-версия фактически выполняет)
- src — основная логика
Пример еды
Когда вы начинаете, вы можете начать с демонстрации в примере и посмотреть, как работает демонстрация.
Сначала отладьте код на основе вывода console.log.
прочитать код
После того, как вы поняли основной процесс работы, вы можете углубиться в конкретный код, например:
- Посмотрите, как различаются реквизиты
- Посмотрите, как обращаются с детьми
Поскольку есть подробные комментарии и сохранена только основная логика, трудности при чтении относительно просты.
И все имена функций в mini-vue соответствуют исходному коду, вы можете скопировать имя функции и выполнить поиск в vue3, чтобы сравнить и изучить
Когда вы освоите и поймете этот мини-vue, вы можете посмотреть исходный код vue3, и вы обнаружите, что его действительно не так уж сложно читать.
Наконец
Более подробные руководства по использованию mini-vue можно посмотретьвидео версия
Если эта библиотека может помочь вам, надеюсь, она поможет и мне.заказать звездуКак поощрение открытого исходного кода (ваша поддержка - моя мотивация)
В будущем я буду обновлять понемногу каждый день и постепенно улучшать mini-vue, надеясь помочь большему количеству студентов, которые любят интерфейс.
также добро пожаловатьissuesВыдвигайте свои мнения и предложения по улучшению mini-vue вместе
Добро пожаловать, чтобы обратить внимание на [Huaguoshan Front End], будет опубликовано больше интересных статей и проектов.