Резюме виртуального дома Youda Vue3.0 (в сравнении с React)

внешний фреймворк
Резюме виртуального дома Youda Vue3.0 (в сравнении с React)

Vue3основнойTypescript,Proxyотзывчивый,CompositionЕсть отличные статьи для разбора повторяющихся и горизонтальных скачков кода.Подведу виртуальный итогDomчасть и сравнитьReact,vdomПереписывание такжеvue3Основная причина, почему производительность настолько хороша

В целом особенно большой живой процесс, несколько старших брата суммировали ворскую палку и направляют место проведения

  1. Достаточно понять исходный код Vue3
  2. Чем же так хорош Vue 3.0, этот очаровательный маленький гоблин? (обновление принципа сравнения)
  3. Примечания для копирования: Юйси говорил об этом в прямом эфире бета-версии Vue3.0…

Виртуальный дом для Vue3

Давайте сначала поговорим о заключении, статической разметке,upadteПроизводительность улучшена в 1,3~2 раза,ssrУвеличить в 2-3 раза, как это сделать?

Статические теги для скомпилированных шаблонов

Давайте посмотрим на очень распространенный код

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>

</div>

vue2 будетРазобрать

function render() {
  with(this) {
    return _c('div', {
      attrs: {
        "id": "app"
      }
    }, [_c('h1', [_v("技术摸鱼")]), _c('p', [_v("今天天气真不错")]), _c('div', [_v(
      _s(name))])])
  }
}

Первые два тега полностью статичны, и при последующих рендерингах изменений не будет.Vue2все еще используется_cнедавно построенныйvdom,существуетdiffКогда вам нужно сравнить, есть некоторые дополнительные потери производительности

Давайте посмотрим на vue3Разобрать результаты

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

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", { id: "app" }, [
    _createVNode("h1", null, "技术摸鱼"),
    _createVNode("p", null, "今天天气真不错"),
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}
// Check the console for the AST

последний_createVNodeЧетвертый параметр 1, реально отслеживаться будут только те, у кого этот параметр, статические узлы не нужно обходить, это основной источник отличной производительности vue3, а дальше смотреть на более сложные

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>

    <div>{{name}}</div>
    <div :class="{red:isRed}">摸鱼符</div>
    <button @click="handleClick">戳我</button>
    <input type="text" v-model="name">
    
</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", { id: "app" }, [
    _createVNode("h1", null, "技术摸鱼"),
    _createVNode("p", null, "今天天气真不错"),
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */),
    _createVNode("button", { onClick: _ctx.handleClick }, "戳我", 8 /* PROPS */, ["onClick"])
  ]))
}

// Check the console for the AST

В четвертом параметре _createVNode есть и другие числа, о чем легко догадаться по следующим комментариям.text,propsДождитесь разных маркеров, поэтому при дифференциации вам нужно только сравниватьtextилиprops, хватит быть бесстрашнымpropsПроходимость, отлично! Узнайте из записок о том, как убедить старшего брата бросить курить

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,  // 表示具有动态插槽的元素
}

Если обаpropsа такжеtextПривязка , комбинация битовой операции может быть


<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div :id="userid"">{{name}}</div>
</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", { id: "app" }, [
    _createVNode("h1", null, "技术摸鱼"),
    _createVNode("p", null, "今天天气真不错"),
    _createVNode("div", {
      id: _ctx.userid,
      "\"": ""
    }, _toDisplayString(_ctx.name), 9 /* TEXT, PROPS */, ["id"])
  ]))
}

// Check the console for the AST

textэто 1,propsЭто 8, а комбинация 9. Мы можем просто использовать битовые операции, чтобы определить, что нужно сделать.textа такжеpropsСуждение побитовое и, пока оно не равно 0, его нужно сравнивать

Использование побитовых операций для компоновки типов само по себе является лучшей практикой, как и старший брат реакции.код

export const PLUGIN_EVENT_SYSTEM = 1;
export const RESPONDER_EVENT_SYSTEM = 1 << 1;
export const USE_EVENT_SYSTEM = 1 << 2;
export const IS_TARGET_PHASE_ONLY = 1 << 3;
export const IS_PASSIVE = 1 << 4;
export const PASSIVE_NOT_SUPPORTED = 1 << 5;
export const IS_REPLAYED = 1 << 6;
export const IS_FIRST_ANCESTOR = 1 << 7;
export const LEGACY_FB_SUPPORT = 1 << 8;

кэш событий

граница@clickбудет храниться в кешеСвязь

<div id="app">
  <button @click="handleClick">戳我</button>
</div>



export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", { id: "app" }, [
    _createVNode("button", {
      onClick: _cache[1] || (_cache[1] = $event => (_ctx.handleClick($event)))
    }, "戳我")
  ]))
}

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

статический подъемник

код

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>
    <div :class="{red:isRed}">摸鱼符</div>
</div>


const _hoisted_1 = { id: "app" }
const _hoisted_2 = _createVNode("h1", null, "技术摸鱼", -1 /* HOISTED */)
const _hoisted_3 = _createVNode("p", null, "今天天气真不错", -1 /* HOISTED */)

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */)
  ]))
}

vdom для vue3 и реактивного волокна

Многие люди все больше и больше жалуются наReact, на самом деле, все больше и больше нравитсяapi, представляющий два направления переднего конца

Vue1.x

нетvdom, полностью адаптивный, каждое изменение данных создается с помощью механизма оперативного уведомленияWatcherРаботайте, как когда отдельный полк был маленьким, каждый солдат зачислялся и продвигался по службе, и он взял на себя инициативу уведомить Лао Ли, что удобно для руководства.

Когда масштаб проекта становится больше, слишком многоWatcher, что может привести к снижению производительности

React15x

а такжеReact15Времена, отзывчивости нет, данные изменились, все новые данные и старые данные делаютdiff, вычислить разницу и знать, как изменитьdomЭто как в командной комнате Лао Ли есть модель.Каждый раз, когда происходит смена персонала, это изменение узнают, сравнивая различия между всеми до и после.Кажется, что расчетов много, но такого родаimmutableСтруктура данных более удобна для больших проектов, иVdomПосле успешной абстракции появляется возможность переключиться на другую платформу для рендера, будь то борьба с чертями или национальная армия, используйте однуvdomмодель

Такая же проблема возникает, еслиdomКоличество узлов продолжает увеличиваться, каждый разdiffвремя превышено16ms, это может привести к задержке (60 кадров в секунду)

Vue2.x

Внедрение vdom для управления детализацией, использование уведомления наблюдателя на уровне компонента и использование vdom для выполнения различий внутри компонента, не будет слишком много наблюдателей, и масштаб vdom не будет слишком большим.Различие превышает 16 мс, что действительно отлично. Так же, как и при росте отдельного полка, Лао Ли будет сообщаться только уровень командира батальона и командира взвода, а управлять им будет внутренний самодиф.

React 16 Fiber

Reactпошли другим путем, так как основная проблема былаdiffпривести к Катону, поэтомуReactушел какcpuлогика планирования, положитьvdomЭто дерево, микроскопически превращенное в связанный список, использует время простоя браузера дляdiff, если более16ms, есть задачи анимации или взаимодействия с пользователем, вернуть браузеру управление основным процессом, и продолжить при простое, особенно как ожидание запаски богини

diffЛогика превратилась в односторонний связанный список, и всякий раз, когда богиня основного потока освобождается, мы будем продолжать тереть ее, чтобы забрать диск.diff, все учатсяrequestIdleCallbackЗнаете, с точки зрения браузера дело обстоит именно так.

примерный код

requestIdelCallback(myNonEssentialWork);
// 等待女神空闲
function myNonEssentialWork (deadline) {
    // deadline.timeRemaining()>0 主线程女神还有事件
    // 还有diff任务没算玩
    while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    doWorkIfNeeded();
    }
    // 女神没时间了，把女神还回去🤣
    if (tasks.length > 0){
        requestIdleCallback(myNonEssentialWork);
    }
}

Vue3

Статическое продвижение и кеширование событий здесь упоминалось только что, поэтому я не буду говорить об этом, на самом деле я тоже очень озадачен.Эти статические теги и кеширование событий,ReactЭто можно сделать само по себе, почему это нельзя реализовать?shouldComponentUpdateВы должны определить их самостоятельно, почему бы вам не изменить компоненты по умолчанию наpureилиmemoНу, увы, может быть, это и есть жизнь

Reactосвободит вас,VueСохранение вашей долговечности также может быть причиной того, что и Vue, и React сейчас так популярны в Китае.

Vue3пройти черезProxyОтзывчивый + компонент внутриvdom+Статическая разметка, которая достаточно детально контролирует детализацию задачи, поэтому не очень нужнаtime-sliceохватывать

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

Подробности прямого эфира

В последний период вопросов я была так же сильна, как Ю Да, и не могла обойти стороной вопрос об объеме волос.К сожалению, никакого кондиционера не порекомендовала.Присмотрелась внимательнее.Кажется, после выхода vue3 , Волосы Ю Да действительно улучшились. Желаю вам всего наилучшего из технологий, а также иметь черные волосы

маленькая реклама

Добро пожаловать ставьте лайки и следите.Мое главное хобби рыбачить.Рекомендую группу рыб.Эта статья написана мной с утра.Прикоснемся к группе рыб с техникой.На днях планирую написать полный разбор Исходный код vue3.серия

Категории