Отличные новые функции vue3
- Комбинированная настройка API
- Глобальный API изменен для работы с экземпляром vue.
- Удалить методы экземпляра on, off и $once(Внутренняя шина событий, которая загромождает организацию кода и затрудняет понимание потока событий)
- Импорт параметра рендеринга функции рендеринга, который не передается автоматически
- изменения жизненного цикла(Эта статья резюмирует лучше, чем официальная)
Это функции, которые я считаю очень важными и замечательными в vue3. Конечно, новых возможностей в vue3 много, и нет необходимости перечислять их по одной, если вам интересно, просто почитайте официальный сайт.
Настоящая сила vue3 — функциональное программирование
Давайте посмотрим на общие формы кода в vue2.x.
На самом деле, в этом нет никакой проблемы, но когда вам однажды понадобится переиспользовать кусок логики, у вас начнет болеть голова, потому что вы найдете целый кусок логики, разбросанный поданные, методы, часы, расчеты..., должны быть тщательно извлечены один за другим.
Затем возникает большая проблема, которая стоит на вашем пути —this, это везде в vue2.x (поскольку vue предоставляет свойство в этом контексте). Таким образом, до 2 наши компоненты обычно являются полными самозакрывающимися компонентами, а повторное использование обычно предназначено для полного компонента или некоторых полностью не сохраняющих состояния служебных функций, а логику внутри компонента трудно использовать повторно.
Если вам нужно переиспользовать какой-то кусок логики, а копировать новый компонент не хочется, то придет гадость, вам придется вводить какие-то параметры в компонент, чтобы им управлять.
Затем было обнаружено, что существует большое количество требований к связи и общему состоянию между компонентами. Компоненты «родитель-потомок» Vue сами по себе передают параметры и не могут удовлетворить сложные требования. Мы начали внедрять библиотеку управления состоянием, такую как vuex, но мы только решил данные и состояние на поверхности.Хаотическая проблема принципиально не решает проблему (повторное использование логики, более простое использование vue, более чистые компоненты).
Давайте подумаем над кодом в vue2, не будет ли ощущения, что vue не очень гибкий (студенты, у которых его нет, могут подумать, как написать высокоуровневый компонент с vue2).
эпоха vue3
Это фрагмент кода компонента Botton, который я перехватил из бизнеса. Я внимательно наблюдал, не нашел ли я каких-либо отличий. Да, весь компонент не имеет состояния. Основной код setStep был извлечен и повторно использован.
Каково значение других компонентов для завершения компонентов логической связи, извлечения и мультиплексирования при подписке на STEP. Давайте посмотрим такой код.
В красном каркасе показаны различные логики, которые используются повторно. Мы инкапсулировали бизнес-логику в три функции. Вам не нужно беспокоиться о деталях логики. Почувствуйте этот стиль кодирования. Это немного похоже на хуки реагирования? то, что я сделал специально Написано, включая следующую функцию инициализации, также можно повторно использовать в качестве функции-оболочки.
В vue3 мы можем поддерживать связанные коды вместе, расстояние между кодами меньше, а удобочитаемость выше.
Vue3 предоставляет многие основные возможности, такие как вычисление, onMounted, просмотр и т. д., представленные в виде функций, что привносит ясность в мой текущий дизайн системы подключаемых модулей редактора.
Многие люди подумают, что vue3 похож на хуки, особенно если вы читаете мой пример выше, вам может показаться, что он больше нравится.Прежде всего, я заявляю, что приведенный выше пример специально написан в стиле хуков.vue3 не требует или порекомендуйте нам использовать его таким образом, но я думаю, что писать таким образом более интуитивно.
Я слышал, что vuex больше не нужен в vue 3. В настоящее время я чувствую, что vuex на самом деле не нужен, потому что мы можем легко извлекать логику компонентов, управлять бизнесом с помощью адаптивных переменных и осуществлять межкомпонентное взаимодействие. Конечно, при сложных моделях vuex все еще очень полезен.
Это извлеченная мной бизнес-логика, которая может быть примерно эквивалентна хранилищу в режиме vuex.
Устаревшие функции vue3
телепорт позволяет разработчикам извлекать компоненты из обычного потока компонентов и вставлять их в определенное место, подобно document.body.appendChild() в js. Ссылаясь на синтаксис goto (java), заброшенный многими языками, я думаю, что должна быть возможность восстановить древовидную структуру компонентов через структуру dom (где вы ссылаетесь на компонент, он должен появиться в соответствующей позиции, если вам это нужно в a div Ссылка на компонент, но вставка его под тело, означает, что этот компонент не должен упоминаться в div), использование телепорта в проекте снизит читабельность кода и искусственно создаст путаницу. Телепорт может выполнять аналогичные функции с помощью компонентов более высокого порядка или хорошего разделения компонентов и повторного использования.
Один из типичных сценариев его применения имеет всплывающее окно, использовать его не рекомендуется, равно как и нельзя использовать с флешкой, но в большинстве сценариев его использовать не следует.
Мысли, вызванные vue3
Если вы ищете«vue3 имеет преимущества, преимущества, преимущества»Для этих ключевых слов большинство ответов — это повышение производительности, составной API, прокси-ответ, оптимизация различий, меньший размер, лучшая поддержка ts...
Эти изменения велики, но их ни в коем случае недостаточно для поддержки замены vue3 большинством пользователей или конечной цели автора, потому что все они «слишком малы».
Я думаю, что vue3 привносит изменения в мышление программирования — программирование с функциональным мышлением.
Участвовал в рефакторинге многих старых проектов.Самое больное это не отсутствие комментариев, плохая читабельность и историческая отягощенность, а зависимости, которые запускают все тело как индийские провода.
Поскольку рефакторинг означает, что мне нужно прочитать полный граф зависимостей, начать работу практически невозможно. Но я просто подумал, если вы купите модуль и сосредоточитесь только на своей области, например, в цехе сборочной линии, цех по изготовлению гвоздей принимает только стандартные железные блоки и производит только железные гвозди, и ничего больше. Спустя годы я понял, что это мышление функционального программирования.
Если вы не можете понять эту идею, вам может быть трудно понять, почему vue3 обеспечивает возможность предоставления жизненных циклов в виде функций или даже почему vue3 существует.
Кажется, объектно-ориентированный еще не понят, и что же это за функционал? На самом деле, какой бы модус он ни был, это абстракция определенной социальной формы в реальном мире. Цель состоит в том, чтобы уменьшить стоимость понимания мышления программирования. Поскольку лежащий в основе код императивен и труден для понимания, люди продолжают создавать высокоуровневые абстракции, поэтому сравнивать их не имеет особого смысла.
Слишком много статей о функциональном программировании, а здесь просто руководство, в надежде помочь вам представить новый образ мышления.
Ограниченность мышления разработчика
Все задумываются над вопросом, почему в интернете так много разборов по техническому уровню vue3, и почему редко задумываются о цели его рождения и почему он появился?
Это общая проблема, характерная для техников. Я считаю, что студенты, которые остались в бизнес-направлении, должны были бы все сказать это предложение: технология важна (не забивайте голову технологиями), но также умейте раскапывать ценность востребованности (и выкапывания корня идей.), на самом деле, я хочу, чтобы вы увидели суть через явления.
Из такого маленького продукта, как функция, многие люди могут проанализировать его принцип и механизм выполнения, но мало кто может понять, почему он существует (если он существует, то разумен), и какие проблемы в обществе он решает.
интермедия
Вот мой собственный обзор лучших практик vue3, во время которого я много читалelement-ui plus(Команда Element связалась с vue3 относительно рано в Китае) кода, а также обобщила некоторые привычки написания React (хуки, которые я извлек, имеют очевидные следы React), а также внедрила и продвигала проект внутри компании.
Внимательные учащиеся могут обнаружить, что моя установка в основном имеет только один код логики возврата, который был извлечен. Цель этого в том, что я не хочу писать огромную установку. Это с точки зрения читабельности кода, поэтому я не буду поставь в настройках.
element-ui plus — написать весь код в сетап для сопровождения (можно посмотреть ихкомпонент ввода), мне очень не нравится поддерживать огромную функцию.
наконец
Пока я использую vue3 менее 2 месяцев.По мере накопления опыта я буду продолжать пересматривать свои взгляды на него.Приглашаю всех обсудить это вместе.