Примечания для копирования: Юйси говорил об этом в прямом эфире бета-версии Vue3.0…

внешний интерфейс Vue.js React.js
Примечания для копирования: Юйси говорил об этом в прямом эфире бета-версии Vue3.0…

предисловие

Vue.js 3.0 Beta

RFCs

Vue.js 3.0 Beta

Весь прогресс и документация будут обновляться в новомRFCsДокументацию можно посмотреть.

2. Шесть основных моментов

  • Performance: больше производительности, чемVue 2.0мощный.
  • Tree shaking support: Можно "обрезать" бесполезные модули и упаковать только то, что нужно.
  • Composition API: комбинацияAPI
  • Fragment, Teleport, SuspenseTeleportкоторыйProtal传送门
  • Better TypeScript support
  • Custom Renderer APIAPI

3. Performance

  1. переписанный виртуальныйDomРеализация (и для обеспечения совместимости, от рендеринга требуния шаблона).
  2. Оптимизация скомпилированного шаблона.
  3. Более эффективная инициализация компонентов.
  4. updateПроизводительность повышается в 1,3~2 раза.
  5. SSRСкорость увеличивается в 2-3 раза.

Ниже приведено сравнение производительности

Пункт 1: Оптимизация скомпилированных шаблонов

Предположим, вы хотите компилировать следующий код

<div>
  <span/>
  <span>{{ msg }}</span>
</div>

будет компилироваться так:

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "static"),
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

// Check the console for the AST

Обратите внимание на второй_createVNode"1" в конце:

Vue генерирует во время выполненияnumber(больше 0) значениеPatchFlag, используется в качестве маркера.

Только сPatchFlagBlock

<div>
  <span>static</span>
  <span :id="hello" class="bar">{{ msg }}   </span>
</div>


import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "static"),
    _createVNode("span", {
      id: _ctx.hello,
      class: "bar"
    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])
  ]))
}

PatchFlagстал9 /* TEXT, PROPS */, ["id"]

говорит нам, что не толькоTEXTизменение, иPROPSизменить (идентификатор)

Он выскочилvirtual domУзкое место в производительности, но при этом сохранена возможность рукописного ввода.renderгибкость. равно: обаreactгибкость с гарантиями производительности на основе шаблонов.

Ключ 2: Кэш монитора событий:cacheHandlers

Предположим, мы хотим связать событие:

<div>
  <span @click="onClick">
    {{msg}}
  </span>
</div>

закрытиеcacheHandlersназад:

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])
  ]))
}

onClickбудет считатьсяPROPS

включиcacheHandlersназад:

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", {
      onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))
    }, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

cache[1]ReactсерединаuseCallbackавтоматизация.

И поддерживает рукописные встроенные функции:

<div>
  <span @click="()=>foo()">
    {{msg}}
  </span>
</div>

Пополнить:PatchFlagsопределение перечисления

И по запросуTsОпределение перечисления, мы можем видеть, что следующие флаги трассировки определены соответственно:

export const enum PatchFlags {
  
  TEXT = 1,// 表示具有动态textContent的元素
  CLASS = 1 << 1,  // 表示有动态Class的元素
  STYLE = 1 << 2,  // 表示动态样式（静态如style="color: red"，也会提升至动态）
  PROPS = 1 << 3,  // 表示具有非类/样式动态道具的元素。
  FULL_PROPS = 1 << 4,  // 表示带有动态键的道具的元素，与上面三种相斥
  HYDRATE_EVENTS = 1 << 5,  // 表示带有事件监听器的元素
  STABLE_FRAGMENT = 1 << 6,   // 表示其子顺序不变的片段（没懂）。 
  KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。
  UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段
  NEED_PATCH = 1 << 9,   // 表示只需要非属性补丁的元素，例如ref或hooks
  DYNAMIC_SLOTS = 1 << 10,  // 表示具有动态插槽的元素
  // 特殊 FLAGS -------------------------------------------------------------
  HOISTED = -1,  // 特殊标志是负整数表示永远不会用作diff,只需检查 patchFlag === FLAG.
  BAIL = -2 // 一个特殊的标志，指代差异算法（没懂）
}

Если интересно, можете посмотреть исходный код:packages/shared/src/patchFlags.ts

4. Tree shaking support

  • Вы можете «обрезать» бесполезные модули и упаковать только то, что вам нужно (например,v-model,<transition>, он не будет упакован, если он не используется).
  • простой"HelloWorld” размер всего: 13.5kb
    • 11,75кб, толькоComposition API.
  • Включая полную функциональность среды выполнения: 22,5 КБ
    • Имеет больше возможностей, чемVue 2более миниатюрный.

Много раз нам не нужноvuevue 2

5. Composition API

а такжеReact Hooks

  • Options APIиспользовать вместе
  • Гибкая логическая комбинация и повторное использование
  • vue 3адаптивные модули можно использовать с другими фреймворками

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

Кому интересно, могут посмотреть:composition-api.vuejs.org/#summary

Composition APIсодержит шесть основныхAPI

Вы можете проверить это здесь:композиция-API.v UE JS.org/API.HTML#color…

Ps: Другие функции являются общими инструментами, вы можете сначала их игнорировать.

6. Fragment

FragmentПереводится как «фрагмент».

  • Больше не ограничивается одним корневым узлом в шаблоне
  • renderФункция также может возвращать массив, аналогично реализацииReact.Fragmentsфункция.
  • 'Just works'

6.1 <Teleport>

  • ранее известный как<Portal>, переводится как портал.
  • Более подробной информацией поделится @Linusborg

<Teleport>Оригинал является цельюReact Portal

Но потому чтоChromePortalРоднойelementЧтобы избежать конфликтов имен, вместо этогоTeleport

6.2 <Suspense>

Suspense

  • Вложенные асинхронные зависимости можно ожидать во вложенных иерархиях.
  • служба поддержкиasync setup()
  • Поддержка асинхронных компонентов

несмотря на то чтоReact 16представилSuspense, но пока это работает не очень хорошо. Как совместить его с асинхронными данными, еще не до конца разработано.

Вью 3<Suspense>Более легкий:

Только 5% приложений могут заметить разницу в расписании во время выполнения.<Suspense>Не выполняет ту же обработку планирования, что и React

7. ЛучшеTypeScriptслужба поддержки

  • Vue 3используетсяTypeScriptНаписанная библиотека, вы можете воспользоваться советами по автоматическому определению типов.
  • JavaScriptа такжеTypeScript
  • служба поддержкиTSX
  • classvue-class-component@next, модуль все еще находится в стадии альфа-тестирования.

а такжеVue 3 + TypeScriptПлагины находятся в разработке, с проверкой типов, автодополнением и т.д. Прогресс обнадеживает.

8. Custom Renderer API: API пользовательского рендерера

  • В процессеNativeScript Vueинтегрированный
  • Пользователи могут попробоватьWebGLПользовательский рендерер, используйте с обычными приложениями Vue (Vugel).

значит можно пройтиvue,Domпрограммноwebglпрограммирование. Заинтересованные могут посмотреть здесь:Getting started vugel

9. Оставшаяся работа

9.1 Docs & Migration Guides

  • Новая документация, написанная@NataliaTepluhina, @sdras, @bencodezen & @phananБыть ответственным за
  • @sdrasВыполнение автоматического обновления инструмента миграции
  • @sodateaИсследования уже началисьCodeMods

9.2 Router

  • следующее поколениеRouter:vue-router@nextужеalpha@posva

Некоторые изAPIRFCТочка зрения.

9.3 Vuex

`

  • следующее поколениеVuex:,vuex@next(а такжеVue 3 compatтот же API), уже вalphaсцена, спасибо@KiaKing.
  • Команда экспериментирует для следующей итерацииVuex APIупрощение

В настоящее время совместим сVue 3В основном, в основном нетAPIМеняй, не паникуй.

9.4 CLI

  • CLIПлагин:vue-cli-plugin-vue-nextby @sodatea
  • (вытирать)CodeModsОбновление поддержкиVue 2заявление

9.5 Новые инструменты:vite(Французский "быстрый")

адрес:github.com/vuejs/vite

простойhttpсервер, не нуженwebpackСкомпилируйте и упакуйте, как требуетсяVueфайл, отправленный непосредственно обратно на рендеринг, и поддерживает горячее обновление (очень быстрое)

9.6 vue-test-utils

  • следующее поколениеtest-utils:test-utils@next
    • by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

9.7 DevTools

  • Первые прототипы были сделаны @Akryum, когда мы доберемся доbetaбудет полностью интегрирован.

Сейчас нужно больше усилий, чтобы стать лучше.

9.8 IDE Support (Vetur)

  • @znckВ настоящее время экспериментирую с проверкой типов для шаблонов.
  • @octrefбудет в маеVue 3провестиVeturинтегрированный

9.9 Nuxt

В настоящее времяNuxtРабота по интеграции также ведется, и внутренняя команда уже работает. Еще нужно время

10. Vue 2.xЕсть еще версия 2.7

  • Будет последняя минорная версия (2.7)
  • отVue 3Улучшения совместимости Backport (без нарушения совместимости)
  • добавить вVue 3Предупреждения об устаревании для функций, удаленных в
  • LTS118 месяцев.

Окончательное предложение:Vue 3Хотя и хорошо, если ваш проект очень стабилен, и требований к новым функциям не слишком много или стоимость миграции слишком высока, обновляться не рекомендуется.

конец

Потребовалось ночь, чтобы переиграть его повторно, и если есть какие-то ошибки, пожалуйста, простите меня.

Прикрепил:Рендеринг шаблон просмотра адреса инструмента, используемый в прямом эфире:vue-next-template-explorer.netlify.app/

Персональный WeChat учителя-убеждающего:huab119

Вы также можете прийти ко мнеGitHubПолучите исходные файлы всех статей в блоге:

Руководство по убеждению:一起玩耍呀。 ~

Категории