Давайте поговорим о 9 точках знаний Vue3

внешний интерфейс Vue.js опрос
Давайте поговорим о 9 точках знаний Vue3

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

Я некоторое время назад изучал исходный код Vue.Изменения в исходном коде 2 и 3 все еще достаточно велики, но ничто не меняет прежние привычки в разработке Vue3.Ведь основные понятия точно такие же, но можно написать проект 3. Это заставляет людей чувствовать себя намного круче, и вы не сможете по-настоящему почувствовать это, если не сделаете этого.

Итак, обязательно приступайте! Скиньте код! Не рекомендуется учиться, не используя его

Здесь я резюмирую некоторые моменты знаний о Vue 3. Если вы мигрируете на Vue 2, изучаете Vue 3 или готовитесь к собеседованию, я полагаю, что вы что-то приобретете после прочтения этой статьи.

Что изменилось в Vue3

Как Vue3 быстрее?

  • Добавлены три новых компонента:FragmentПоддерживает несколько корневых узлов,SuspenseУказанный контент может отображаться в течение времени ожидания перед визуализацией компонента,TeleportПозволяет дочерним компонентам визуально выпрыгивать из родительских компонентов (например, переполнение родительского компонента: скрыто)
  • добавить командуv-memo, можно кешировать html шаблоны.Например,если список v-for не меняется,то он будет кешироваться.Проще говоря использует память на время.
  • служба поддержкиTree-Shaking, удалит некоторый бесполезный код и неиспользуемые модули во время упаковки, уменьшив размер упаковки кода.
  • новыйComposition APIЭто может улучшить логическое повторное использование и организацию кода, и код одной и той же функции не будет слишком разбросан, как раньше.Хотя minxin можно использовать в Vue2 для реализации повторного использования кода, есть также проблемы, такие как имена методов или свойств, которые будут конфликтовать, источник кода не знаю
  • использоватьProxyВместо Object.defineProperty перестроена отзывчивая система, которая может следить за изменением индексов массива и новыми свойствами объектов, ведь это не свойства объектов, а сами объекты, и 13 методов типа apply и has могут быть перехвачено.
  • Реконструируется виртуальный DOM, события кэшируются во время компиляции, слоты компилируются в ленивые функции, статические узлы сохраняются для прямого повторного использования (статическое продвижение) и добавляются статические теги Алгоритм Diff использует самую длинную возрастающую подпоследовательность для оптимизации сравнения Ускоряет генерацию виртуальной модели DOM.200%
  • поддержка в<style></style>используется вv-bind, привязать переменные JS к CSS (color: v-bind(str))
  • использоватьsetupЗаменяет два жизненных цикла beforeCreate и created
  • недавно добавленныйсреда разработкиДве функции хука, когда компонент обновляетсяonRenderTrackedБудет отслеживать изменения всех переменных и методов в компоненте каждый раз, когда запускается рендеринг.onRenderTriggeredВернет старые и новые значения, которые изменились, что позволит нам выполнить целенаправленную отладку
  • В конце концов, Vue3 используетTSнаписано, так что даTSлучшая поддержка
  • Несовместимость с Vue3IE11

Разговор о Composition API

Отличие от API опций?

Composition APIТакже известен какAPI композиции, это в основном для решения проблемы API опций в Vue2.

Во-первых, это можно исправить только в Vue2.data,computed,methodsДругие варианты организации кода, когда компоненты становятся все более и более сложными, свойство и метод, связанные с функцией, будут повсюду в файле, сильно разбросаны, и его будет все труднее поддерживать

Во-вторых, хотя его можно использовать в Vue2minxinЧтобы сделать логическую добычу и повторное использование, но имена атрибута и методов в Minxin будут конфликтуют с именами внутри компонента, и когда появится несколько минсинов, не понятно, какой Minxin атрибуты или методы, которые мы используем.

а такжеComposition APIЭти две проблемы были решены только сейчас, что позволяет нам свободно организовывать код и объединять все связанные функции, код становится более читабельным и простым в обслуживании, и он не будет вызывать конфликты имен при извлечении по отдельности, поэтому есть также лучшая масштабируемость

сказать настроить

// 方法
setup(props, context){ return { name:'沐华' } }

// 语法糖
<script setup> ... </script>

setup()метод находится вbeforeCreate()Функция, выполняемая перед функцией жизненного цикла;

Он принимает два параметраpropsа такжеcontext. в нем нельзя использоватьthis, но замените объект, связанный с текущим контекстом выполнения, на объект контекста. Объект контекста имеет четыре свойства:attrs,slots,emit,expose

пройти внутрьrefа такжеreactiveВместо предыдущего синтаксиса данныхreturnВыходящий контент можно использовать непосредственно в шаблоне, включая переменные и методы.

при использованииsetupКогда синтаксический сахар, не пишиexport default {}, дочернему компоненту нужно толькоimportПросто используйте его напрямую, вам не нужно регистрировать его в компонентах, как раньше, а свойства и методы не нужно возвращать.

и нет необходимости использоватьasyncможно использовать напрямуюawait, так как по умолчанию компонентsetupсталиasync setup

При использовании синтаксического сахара способ получения props, attrs, slots, emit, expose также отличается.

Версии 3.0~3.2 стали API, введенным импортом:defineProps,defineEmit,useContext(устарело в версии 3.2), свойство useContext{ emit, attrs, slots, expose }

Версия 3.2+ не нуждается в представлении, а напрямую вызывает:defineProps,defineEmits,defineExpose,useSlots,useAttrs

Разница между часами и watchEffect

watchФункция состоит в том, чтобы отслеживать изменение одного или нескольких переданных значений; она будет возвращать новое значение и старое значение при срабатывании; то есть она не будет выполняться в первый раз, и она будет выполняться снова только при его изменении.

const name = ref('沐华')
watch(name, (newValue, oldValue)=>{ ... }, {immediate:true, deep:true})

// 响应式对象
const boy = reactive({ age:18 })
watch(()=>boy.age, (newValue, oldValue)=>{ ... })

// 监听多个
watch( [name, ()=>boy.age], (newValue, oldValue)=>{ ... } )

watchEffectЭто передача функции немедленного выполнения, поэтому она будет выполнена один раз по умолчанию; нет необходимости передавать содержимое мониторинга, источник данных в функции будет автоматически собран как зависимость, и функция будет выполнена повторно. при изменении зависимости зависимости не будут выполняться и не будут возвращать новые и старые значения до и после изменения

watchEffect(onInvalidate =>{ ... })

Общий знаменательwatchа такжеwatchEffectСледующие четыре поведения являются общими:

  • 停止监听: Когда компонент будет удален, он автоматически перестанет прослушивать
  • 清除副作用: onInvalidate будет передан в качестве третьего параметра обратного вызова
  • 副作用刷新时机: Отзывчивая система будет кэшировать функции побочных эффектов и обновлять их асинхронно, чтобы избежать повторных вызовов, вызванных несколькими изменениями состояния в одном такте.
  • 监听器调试: вы можете использовать onTrack и onTrigger для отладки в режиме разработки.

Описание официального документаследующим образомimage.png

Разница между реактивным принципом Vue3 и Vue2

хорошо известныйVue2Реагирование данных осуществляется черезObject.defineProperty()Перехват различных геттеров и сеттеров свойств, публикация сообщений подписчикам при изменении данных и запуск соответствующих обратных вызовов прослушивателя — есть несколько проблем.

  • При инициализации нужно пройти по всем ключам объекта, если уровень объекта глубокий, то производительность не очень хорошая
  • Процесс обновления уведомлений должен поддерживать большое количество экземпляров DEP и экземпляров наблюдателей, что занимает много дополнительной памяти
  • Object.defineProperty не может отслеживать изменения элементов массива и может только переопределить числовой метод, перехватив
  • Динамическое добавление, удаление свойств объекта не может быть перехвачено и может быть заменено только определенными API-интерфейсами установки/удаления.
  • Такие структуры данных, как Map и Set, не поддерживаются.

пока вVue3Для решения этих проблем используйте роднойproxyВместо этого он поддерживает мониторинг изменений объектов и массивов, и существует целых 13 методов перехвата. Могут быть перехвачены динамические добавления и удаления атрибутов. Поддерживаются все новые структуры данных. Вложенные атрибуты объекта представляют только первый слой, рекурсивный во время выполнения, и только тогда, когда они используются. , и не нужно поддерживать много зависимостей, производительность значительно улучшилась

Для более подробной информации и анализа исходного кода я могу увидеть другую статьюАнализ исходного кода принципа адаптивности Vue3.2 и разница с адаптивностью Vue2

Разница между defineProperty и Proxy

Зачем использовать Proxy вместо defineProperty? Где хорошее?

  • Object.defineProperty — это метод Es5, Proxy — это метод Es6.
  • defineProperty не может отслеживать изменения индексов массива и новые свойства объектов.
  • defineProperty — перехватить свойства объекта, Proxy — проксировать весь объект.
  • defineProperty имеет множество ограничений и может отслеживать только одно свойство, поэтому в начале его необходимо отслеживать рекурсивно. Вложенные свойства объекта Proxy рекурсивны во время выполнения, используется только прокси, и нет необходимости поддерживать множество зависимостей, производительность значительно улучшена, и первый рендеринг быстрее
  • defineProperty будет загрязнять исходный объект. При его изменении он изменит исходный объект. Прокси будет проксировать исходный объект и вернет новый прокси-объект, который является прокси-объектом.
  • defineProperty не совместим с IE8, Proxy не совместим с IE11

Жизненный цикл Vue3

По сути, он добавляется к имени функции ловушки жизненного цикла Vue2.on; beforeDestory и destoryed были переименованы в onBeforeUnmount и onUnmounted; затем были удалены две хуковые функции beforeCreate и created; добавлены два хука среды разработки для отладки

未命名文件 (1).png

8-компонентная коммуникация в Vue3

Вы можете прочитать мою другую статью, я не буду двигаться здесьVue3's 8 видов общения Vue2, стоит собирать

Разница между алгоритмом Vue3 Diff и Vue2

Мы знаем, что когда изменения данных вызывают повторный рендеринг страницы, будет сгенерирован виртуальный DOM и будет выполнен процесс исправления Оптимизация этого процесса в Vue3 выглядит следующим образом.

Оптимизация этапа компиляции:

  • Кэш событий: Кэш событий (например: @click) можно понимать как статический.
  • Статическое продвижение: сохраните при создании статического узла в первый раз и повторно используйте его сразу после этого.
  • Добавить статические маркеры: добавьте статические маркеры к узлам, чтобы оптимизировать процесс сравнения.

Благодаря оптимизации этапа компиляции, помимо более быстрого создания виртуального DOM, он также позволяет Diff пропускать «узлы, которые никогда не меняются».

  • Vue2 — полный Diff, Vue3 — статическая разметка + неполный Diff
  • Оптимизированный процесс выравнивания с использованием самой длинной возрастающей подпоследовательности

Согласно данным, опубликованным Youda, это Vue3.updateУлучшена производительность1.3~2 倍

Анализ исходного кода можете посмотреть в другой моей статьеОбъясните алгоритм виртуального DOM и Diff простыми словами, а также разницу между Vue2 и Vue3.

Прекрасное прошлое

Эпилог

Старый утюг, пожалуйста, поднимите палец вверх~~

Категории