предисловие
В июне 2018 года я опубликовал курс по разбору исходного кода Vue.js 2.x на MOOC.com."Всесторонний и глубокий анализ исходного кода Vue.js", а также пакеты курсов с открытым исходным кодомэлектронная книга. Спустя более года Vue официально открыл исходный код Vue.js 3.x.В ближайшем будущем я также буду систематически анализировать исходный код Vue.js 3.x и обновлять видеокурс и электронную книгу.
Исходный код Vue.js 3.x только что был открыт, многие люди очень взволнованы, и я не исключение. Я написал эту статью как пилотный фильм курса анализа исходного кода Vue.js 3.x, и я поделюсь с вами некоторыми своими мыслями об исходном коде Vue.js.
Расскажите о Vue.js 3.x
Текущее состояние Vue.js 3.x
Vue.js 3.x в настоящее время находится вPre-AlphaСтатус от официального лица VueRoadmapГлядя на исходный код Vue 3.x до конца третьего квартала 2019 года, помимо продолжения улучшения основного исходного кода Vue.js в четвертом квартале, необходимо завершить окружающую экологическую конструкцию: например,vue-router,vuex,vue-cli,Vue Devtools,JSXПодождите, альфа-версия не будет выпущена до конца четвертого квартала. Тем не менее, альфа-версия является только внутренней тестовой версией, а затем она пройдет бета-версию для внешнего тестирования, версию-кандидата на выпуск RC и, наконец, официальную версию Realase, поэтому всем потребуется много времени, чтобы вставить ее в использовать в производственных условиях. Итак, что я могу сделать с Vue.js 3.x за это время.
Vue.js RFC
Первоначальное намерение Vue.js официально настроить RFC состоит в том, чтобы стандартизировать процесс разработки самого Vue.js.Когда появляется идея для новой функции, предложение RFC будет опубликовано первым, и сообщество обсудит его вместе. Предложение утверждается, разрабатывается и реализуется.
Перед разработкой Vue.js 3.x также был выпущен ряд RFC-предложений, среди которых наиболее обсуждаемым является метод написания компонентов Vue.js 3.x.Class-APIПредложение было отвергнуто до бурного обсужденияFunction-based component API, а затем к окончательному подтверждению на основеFunction-based component APIПересмотреноComposition API, Спустя долгое время в сообществе прозвучало много возражений, таких как «это больше похоже на React, почему бы мне не использовать React напрямую», «Class API лучше», «Vue.js становится еще немного Это уже не просто." Подождите, чиновники хорошо поработалиреагировать, поэтому, чтобы изучить Vue.js 3.x, вы должны сначала изучить этоRFC.
Изучив этот RFC, вы получите общее представление о методе написания, подробном дизайне и даже некоторых «недостатках» компонентов Vue.js 3.x. Vue.js 3.x отказывается от версии 2.xOptions API, обнялComposition API, для лучшего повторного использования логики, организации кода и лучшего вывода типов.
Первые пользователи Vue.js 3.x
Vue.js 3.x исходный кодОн был открыт, хотя и не выпущен, но мы можем клонировать его, установить соответствующие зависимости и собрать упакованный код для собственного использования.
после чтенияComposition APIПосле RFC у нас есть определенное понимание метода написания компонентов Vue.js 3.x, и большинство функций 2.x 3.x поддерживаются, мы должны использовать 3.x для написания простой демонстрационной задачи. не должно быть большой проблемой. Некоторое время назад я написал демонстрацию todomvc на основе Vue 3.x, заинтересованные студенты могут перейти наGitHubклонируй и беги смотреть.
Я также столкнулся с этим при написании демоv-modelДля реализованной ямы, после отладки исходного кода, я примерно определил причину, но, поскольку изменений, затрагивающих ядро, будет больше, я дал отзыв You Da (WeChat поднял вопрос), и официальный вскоре устранил проблему.
Исходный код Vue.js 3.x
На второй день после выпуска исходного кода Vue.js 3.x сообщество опубликовало статьи по анализу исходного кода, но, прочитав несколько статей, все они анализировалиReactiveСвязанные API создают иллюзию, что Vue всего лишь отзывчивый, и даже некоторые учебные заведения последовали этому примеру. Некоторые статьи очень хорошо написаны, например, я помню, что в Наггетс есть статья, которая учит всех начинать с одного теста, что действительно является хорошей идеей для изучения исходного кода, но есть еще несколько статей, которые слишком горячи . Для меня, кромеReactive, я предпочитаю обращать вниманиеSetupЛогика инициализации функции,Compileоптимизация процесса,Renderорфографические изменения иPatchоптимизация процесса.
Исходный код Vue.js 3.x использует метод управления монорепозиторием и написан на TypeScript.Для разработчиков Vue.js этот метод упрощает поддержку исходного кода. Если вы хотите изучить исходный код Vue.js 3.x, сначала вам нужно изучить TypeScript.
Для большинства людей слишком рано смотреть на исходный код Vue.js 3.x, в основном потому, что вы еще не можете его использовать.Я уже публиковал статью о Nuggets.Поговорим об изучении исходного кода, сейчас не самое подходящее время для изучения исходного кода Vue.js 3.x.
Однако, если вы с большим энтузиазмом относитесь к технологиям, изучение исходного кода Vue.js 3.x на ранней стадии или даже участие в разработке и совместном создании Vue.js 3.x будет большую помощь в вашем собственном техническом совершенствовании.
Является ли исходный код Vue.js 2.x устаревшим?
Исходный код Vue.js 3.x открыт, и многие друзья не могут не волноваться: не устарел ли исходный код Vue.js 2.x, когда я узнаю его сейчас?
Зрелый и стабильный vue.js 2.x
Vue.js 2.x Выпуск с конца 16, и это было почти три года, существует многочисленные производители, использовали проекты реконструкции и развития Vue.js, NPM загружают Vue.js 2.x более 90 миллионов в месяц, JSDELIVR CDN в месяц 500 миллионов цитат, Chrome devtools 90 миллионов активных пользователей в неделю. Такое большое количество пользователей, достаточном для отображения Vue.js, является очень надежной и зрелой структурой, в дополнение к официальному веб-сайту вопроса, ответ на протяжении запроса является относительно быстрой, в дополнение к до 97% от модуля теста, Чиновник также пытается сделать некоторыеРегрессионное тестирование.
Мы знаем, что Vue.js — это прогрессивный фреймворк, за исключением некоторых официально предоставленных экологических плагинов.vue-router,vuex,vue-cliКроме того, в сообществе есть много отличных колес, таких какelement-ui,cube-ui,vue-lazyload,vue-i18nПодождите, эти плагины вполне могут помочь нашему обычному развитию бизнеса.
стоимость обновления
Обновление Vue.js 2.x -> Vue.js 3.x по-прежнему имеет определенную стоимость, хотя говорят, что официальные лица сделают предварительный заказ.Options APIВерсия метода письма, но неизбежно будут некоторые критические изменения, такие как почеркrenderИзменился синтаксис функциональной части, а также изменилось написание шаблона. В будущем должно быть руководство по обновлению кода, и даже будут использоваться инструменты, которые помогут нам выполнить часть работы, но обновление базовой структуры для крупномасштабных производственных проектов по-прежнему сопряжено со значительными затратами и рисками.
Если ваш бизнес-код обновлен до Vue.js 3.x, это означает, что экологические плагины, от которых вы зависите, также необходимо обновить до Vue.js 3.x, напримерelement-uiЭтот тип крупномасштабного проекта требует значительного объема работы для обновления, поэтому вам нужно подождать, пока экологический подключаемый модуль, от которого вы зависите, не будет обновлен до Vue.js 3.x и не стабилизируется, прежде чем вы сможете рассмотреть возможность обновления фреймворка в своем бизнес.
Обновление Vue.js 1.x -> Vue.js 2.x не кажется таким хлопотным, потому что пользовательский масштаб Vue.js 1.x еще мал, а экология еще не развита, и даже многие компании напрямую используют Vue..js 2.x, без исторического багажа.
Болевые точки
Изменения при обновлении с Vue.js 1.x -> Vue.js 2.x по-прежнему очевидны.Виртуальный DOM реализован в Vue.js 2.x, что делает возможным рендеринг на стороне сервера и кросс-сайд рендеринг. Давайте посмотрим на цели дизайна Vue.js 3.x: меньше, быстрее, усилить поддержку TypeScript, повысить согласованность дизайна API, улучшить его ремонтопригодность и открыть больше базовых функций. Для большинства пользователей привлекательным является быть меньше и быстрее, а для пользователей TypeScript — усиление поддержки TypeScript, но могут ли они решить болевые точки в разработке?
Если Vue.js 3.x не может решить болевые точки при разработке Vue.js 2.x (например, у моего проекта есть узкое место в производительности, и улучшение производительности может помочь мне решить это узкое место), стоимость рефакторинга и это принесет Выгоды - это вопрос компромиссов. Кроме того, учитывая, что Vue.js 3.x использует некоторые новые функции ES6, такие как прокси-сервер, также необходимо учитывать совместимость с браузерами.
Босс обычно не позволяет вам делать эту чисто техническую реконструкцию.Если вы хотите использовать Vue.js 3.x для ребилда, вы должны поймать болевые точки и сделать реконструированные усиления и босса.
Хотя рефакторинг старых проектов с помощью Vue.js 3.x сопряжен с большими затратами и рисками, мы также можем опробовать новые технологии в некоторых непрофильных новых проектах. официально выпущен.Выпуск и зависимые плагины Vue должны быть обновлены для поддержки Vue.js 3.x.
В заключение
Vue.js 3.x должен пройти долгий путь, чтобы полностью заменить Vue.js 2.x.Vue.js 2.x еще долго будет основным в будущем, и изучение исходного кода Vue.js 2.x не является устаревшим, если вы являетесь пользователем Vue.js 2.x, вам следует изучить исходный код Vue.js 2.x.
Должен ли я изучать исходный код
Многие люди в замешательстве, я могу использовать его, зачем мне изучать исходный код?
Преимущества изучения исходного кода
Обучение нужно для лучшей работы, неизбежно, что работа столкнется с некоторыми проблемами, и самые непосредственные выгоды от изучения исходного кода являются основной причиной проблемы, так что вы можете решить проблему. Многие люди жалуются на сверхурочную работу, возможно, пожелают спросить себя, сколько времени пишется в делах, сколько времени пишется (находит) ошибка. Проблема с быстрым позиционированием решает проблему, которая может эффективно повысить эффективность вашей работы, вполне вероятно, что вам не придется обгонять и даже тратить больше времени на обучение, образуя безвредную петлю.
Изучение исходного кода может укрепить основу, потренировать внутреннюю силу и улучшить технологию. Фронтенд почти всегда изучает основы JS, такие как типы, переменные, функции, области видимости, замыкания, цепочки прототипов, циклы событий и т. д., но многим людям сложно использовать эти знания на практике.Основная причина это недостаток практики Ну, я трачу большую часть своего времени на написание связующего кода для бизнеса. Изучение исходного кода фреймворков, таких как Vue.js, будет продолжать укреплять эти знания.Если вы умеете читать исходный код, то ваша основа JS будет более прочной.
Изучение исходного кода поможет вам лучше понять стек технологий, который вы используете, и более эффективно использовать его в своей работе. Например, если вы глубоко изучили основной исходный код Vue.js, вы поймете значение фреймворка Vue.js, границы ответственности Vue.js и характер управления данными; вы также узнаете, как реализовать компонентизацию и в каком жизненном цикле она должна быть Что делать, как писать плагины Vue.js и как глубоко интегрироваться с другими сторонними библиотеками JS. Вы больше никогда не будете задавать глупые вопросы вроде «как реализовать XXX с помощью Vue».
Изучение исходного кода может заставить нас встать на плечи гигантов.Vue.js настолько хорош, и Youda также ссылается на реализацию многих других превосходных исходных кодов, таких как Vue.js 2.x.Virtual DOMНекоторые ссылкиsnabbdom, Vue.js 3.xReactiveРеализация ссылкиMeteor Trackerа такжеsalesforce/observable-membraneЖдать. Когда мы читаем исходный код, мы также можем использовать отличные дизайнерские идеи и реализацию кода в исходном коде в нашу обычную работу по разработке.
Изучение исходного кода также имеет утилитарный эффект, имея дело с интервью. Все больше и больше компаний изучают исследование кандидатов принципа реализации технологического стека, используемого в процессе собеседования. Основная цель - изучить технические способности кандидатов, технический энтузиазм и стремление, потому что обычно люди, которые любят технологии, обычно интересуются технологиями. , Готовы изучить принципы реализации используемого стека технологий. Однако студенты, которые часто изучают исходный код для этой цели, плохо учатся и имеют очень поверхностное понимание исходного кода и даже механическое заучивание. Таким образом, изучение исходного кода может помочь нам свободно отвечать на интервью, но мы не должны изучать исходный код для интервью.
Время изучить исходный код
Обычно время, когда мы изучаем исходный код стека технологий, это когда мы уже умеем его использовать.Например, если вы пользователь Vue.js со стажем более года, то вы уже можете изучить его исходный код., в это время ваше изучение должно быть систематическим.
Когда вы используете новый фреймворк в своей работе, вы сталкиваетесь со странной проблемой, которую нельзя решить, ознакомившись с документацией.В это время вы также можете посмотреть исходный код.Конечно, вам не нужно систематически изучать в это время , Если вы понимаете исходный код, связанный с вашей проблемой, вы можете найти проблему. Конечно, чтобы выполнить этот шаг, вам нужно иметь возможность быстро прочитать исходный код, чтобы найти проблему Эта способность также проявляется в процессе чтения большого количества отличного исходного кода.
Узнайте, как не делать больше
Мы представили множество преимуществ изучения исходного кода, но само изучение исходного кода скучно и абстрактно, оно не имеет интуитивного и крутого эффекта, и для обучения требуются мозги.
На самом деле, главная причина, по которой вы не можете учиться, заключается в том, что у вас нет хорошего метода обучения, который может заставить вас делать больше с меньшими затратами.Поговорим об изучении исходного кодаНесколько методов, упомянутых в статье, всестороннее понимание, проблемность, приоритет основной линии, участие в состроительстве, навыки чтения, вспомогательные материалы. В дополнение к этим методам, по опыту некоторых студентов, которые хорошо усвоили мой курс исходного кода, я делаю больше заметок в процессе обучения, задаю больше вопросов в разделе вопросов и ответов курса и даже провожу серию анализов исходного кода. статьи сам, все они могут быть очень хорошими.Вспомогательное изучение исходного кода. На самом деле, делая эти вещи, вы постоянно помогаете себе обрести уверенность в себе и чувство достижения, стимулировать интерес к обучению и сделать скучные вещи интересными и значимыми.
План продолжения курса
Курс исходного кода будет ждать выхода официальной версии Vue.js 3.x и начнет готовиться к перезаписи, что по-прежнему характерно для электронных книг и видео.
Курс с перезаписанным исходным кодом не только объяснит процесс реализации исходного кода, но также добавит некоторый анализ сценариев использования и причин проектирования.
В обновленный курс добавлены главы Vue.js 3.x на основе исходного курса Студенты, которые уже приобрели курс, могут продолжить обучение, не покупая новый курс.
Сначала научитесь использовать, а потом изучите принцип, поэтому после официального релиза Vue.js 3.x приоритет отдам перезаписи«Vue2.0 для разработки мобильного музыкального веб-приложения корпоративного уровня»Курсы также можно бесплатно обновлять.
Перезапись музыкальных курсов + курсы по исходному коду — мой основной план на следующий год, новых курсов пока не планируется. В дополнение к обновлению версии я бы сделал что-то вроде"Vue.js2.5 + cube-ui Рефакторинг приложения Ele.me"Попробуйте добавить в курс что-то новое, например, обновить курс, так что следите за обновлениями~