В последнее время Vue Author You Yuxi поделился шестью основными моментами Vue 3.0 в своем выступлении на станции B:
- представление
- Поддержка встряхивания дерева
- Composition API
- Фрагмент, Телепорт, Саспенс
- Улучшенная поддержка ТС
- Пользовательский API рендеринга
Оптимизация производительности VDOM при компиляции
PatchFlag
Сначала взгляните на следующий случай: в шаблоне есть три тега P, из которых динамической является только часть TEXT последнего тега P.
В предыдущем VDOM, если значение msg изменилось, все элементы во всем шаблоне должны были быть перерисованы. Но в Vue3.0 при компиляции этого шаблона компилятор добавит в конец динамического тега/* Text*/ПатчФлаг. Только узлы с patchFlag считаются динамическими элементами и будут изменены атрибутами отслеживания. А PatchFlag идентифицирует типы динамических атрибутов.Например, ТЕКСТ здесь означает, что динамическим является только текст в узле.
Узлы в каждом блоке, даже если они глубокие, напрямую привязаны к блочному слою и могут напрямую переходить к динамическим узлам, не переходя слой за слоем.
Он обладает как гибкостью VDOM, так и гарантией производительности.
продвижение статического узла hoistStatic
При использовании Heaststatic все статические узлы должны быть подняты из метода Render. Это означает, что они начнутся только тогда, когда приложение будет создано один раз, а затем с каждым рендерингом постоянно повторно используется.
Есть отличные оптимизации для памяти в больших приложениях.
Кэш прослушивателя событий cacheHandler
Обычно при привязке события:
<div>
<p @click="handleClick">静态代码</p>
</div>
Шаблон будет скомпилирован как
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", { onClick: _ctx.handleClick }, "静态代码", 8 /* PROPS */, ["onClick"])
]))
}
Куда каждое событие будет попадать из глобального контекста. И при открытии cacheHandler
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", {
onClick: _cache[1] || (_cache[1] = ($event, ...args) => (_ctx.handleClick($event, ...args)))
}, "静态代码")
]))
}
Редактор динамически создает встроенную функцию для вас, выпивать встроенные встроенные функции внутри последних на текущем обработчике компонента. После редактирования встроенной функции будет кэшироваться. Если каждый раз, когда вы повторно рендеринг обработчика событий не изменились, но он не будет получать обработчики событий использовать обработку событий кэша. Этот узел можно рассматривать как статический узел. Эта оптимизация заключается в том, что, когда большая роль в его компонентах охвата перед каждым повторным рендерингом приведет к повторной визуализации компонента, после прохождения через обработчик кэша не приведет к рендурирующему компоненту.
Рендеринг SSR на стороне сервера
Когда SSR включен, если в нашем шаблоне есть статические теги, эти статические теги будут напрямую преобразованы в текст.
Динамическая привязка по-прежнему встроена в отдельную строку. Эта производительность определенно намного выше, чем преобразование React в VDOM для HTML.
Статический узел StaticNode
Только что упомянул, что статические узлы в SSR будут преобразованы в простые строки. На стороне клиента, когда статические узлы достаточно вложены друг в друга, компилятор VUE также преобразует VDOM в простой строковый HTML. А именно StaticNode.
Благодаря этим операциям мы видим, что он может быть более чем в два раза быстрее, чем vue2, а объем памяти может быть более чем в два раза меньше.
Tree Shaking
因为ES6模块是静态引用的，所以我们可以在编译时正确的判断到底加载了哪些代码。对代码全局做一个分析，找到那些没用被用到的模块、函数、变量，并把这些去掉。
При использовании пакета (веб-пакета и т. д.) TreeShaking добавляется по умолчанию. Модули, которые не используются в Vue 3.0, могут быть удалены TreeShake без упаковки в скомпилированный файл. Vue3 упаковал 13,5 КБ, когда был только один HelloWorld. 22,5 КБ со всеми загруженными компонентами
Composition API
По мере роста компонентов Vue код внутри компонента становится все труднее понимать и поддерживать. Некоторые из этих многоразовых кодов трудно извлечь. В то же время в Vue2.0 также отсутствует поддержка TS. В Vue2 логические понятия (функции) управляются в компонентах, но функции и компоненты не находятся во взаимно-однозначных отношениях. Функция может использоваться несколькими компонентами, а компонент может иметь несколько функций. В Vue функция может зависеть от нескольких параметров (компонентов, свойств, данных, вычисляемых, методов и методов жизненного цикла).
Предоставляет настраиваемые методы в Composition API. В качестве примера возьмем компонент с функцией поиска и функцией сортировки:
<script>
export default {
setup() {
}
}
function useSearch() {
return {
...useSearch(),
...useSorting()
}
}
function useSorting() {
}
</script>
Повторное использование кода в Vue2
Mixin
Есть несколько способов повторного использования кода в Vue2, один из которых — Mixins.
- Миксины могут выполнять организационные функции
- склонен к конфликтам
- Трудно объяснить зависимость
- Код нелегко использовать повторно
Миксин Фабрика
- Может быть легко использован повторно
- явные зависимости
- слабое пространство имен
- Неявные добавления свойств
Scoped Slots
- Миксин решает проблему
- Увеличение иерархических отношений усложнило понимание
- много информации о конфигурации
- меньшая гибкость
- плохая работа
Основной API
- reactive
- ref
- computed
- readonly
- watchEffect
- watch
- Lifecycle Hooks
Fragments
В Vue3 больше не требуется, чтобы корневой узел шаблона имел только один узел. Возвращаемый узел и функция рендеринга могут быть простым текстом, массивами или отдельными узлами. Если это массив, он будет автоматически преобразован во фрагменты.
Teleport
Реантремный портал React. Вы можете сделать какой-то адаптивный дизайн. Если ширина экрана относительно широкая, добавьте определенные элементы и удалите их после сужества экрана.
Suspense
Дождитесь вложенных асинхронных зависимостей. Прежде чем отображать вложенное дерево компонентов на страницу, отобразите его в памяти и запишите все компоненты, имеющие асинхронные зависимости. Только после разрешения всех асинхронных зависимостей вся книга будет отображена в DOM. Когда ваш компонент имеет асинхронную функцию настройки, этот компонент можно рассматривать как асинхронный компонент, и только после того, как компонент будет разрешен, будет визуализировано все дерево.
- async setup()
- Async Component
Typescript
Исходный код Vue3 переписан с использованием TS, но это не значит, что проект vue3 также должен использовать TS. Но Vue3 будет иметь лучшую поддержку TS.
- Поддержка TSX
- Поддержка компонентов класса
- Код будет больше