С этой целью приступим!

Изменить: (20.01.19) Обновите образцы кода и репозиторий, чтобы применить [email protected] и связанные обновления к доступному там API. Эти изменения включают, помимо прочего, предварительно установленный this контекст прослушивателей событий на основе шаблона, поддержку adoptedStyleSheets, обновленные метаданные свойств и сериализацию типов по умолчанию.

За стандартную неделю работы инженера-программиста вам будет трудно избежать пары хороших статей о том, что этот подход против того. В мире внешнего интерфейса это часто принимает форму того, как фреймворк или библиотека X сравниваются с аналогичными в Y. На этой неделе мой принял форму Сравнение Angular и React и их основных языков. В другие недели это может быть три или семь разных статей! Тем не менее, большее количество статей в неделю очень мало способствует тому, чтобы в любой из этих статей вы нашли действительно твердое письмо, логику или обучение. Я думаю, мы подпитываем самоисполняющееся пророчество о том, что чем больше о чем-то написано, тем больше об этом напишут и другие. Цикл ускоряется до такой степени, что становится почти нежелательным, когда вы сосредотачиваетесь конкретно на том, что может восприниматься как основных игроков, таких как Angular, React или Vue.

К сожалению, как правило, чем больше о чем-то пишут, тем труднее найти качественные статьи по этой теме. Вот почему очень приятно, когда вы действительно находите сравнение качества технических приложений в письменной форме, и я сделал это несколько недель назад, когда мне доставили Сунил Сандху Я создал точно такое же приложение в React и Vue. Вот отличия . Мало того, что в написании избегается явного фаворитизма, несмотря на то, что Сунил ясно дал понять, что он работал преимущественно с Vue до момента написания, это был дополнительный шаг, заключающийся в сравнении двух не аллегорически, а с реальным кодом; код, достаточно сложный, чтобы добраться до важных моментов, и достаточно прост, чтобы читатель мог его проанализировать, не вкладывая чрезмерное количество времени в процесс. Более того, как инженер, который работал только над краями приложений React или над демонстрационным кодом, хотя я не написал ни строчки на Vue, я действительно почувствовал, что получил более глубокое понимание каждого из них после завершения статьи.

Определенно, именно такого рода качественные статьи по теме вдохновляют других на участие в игре; даже если это только я, это случилось, и теперь ты тоже его часть! Иногда это прямой ответ в духе У меня есть мнение, которым я тоже хочу поделиться в этой области, но для меня в последние несколько недель я просто мог перестать думать: Вот прекрасная статья, рассказывающая о React и Вью, где эта статья относится к технологиям, на которые я полагаюсь? Как давний создатель веб-компонентов, а в последнее время активно инвестирующий в LitElement, в настоящее время яростно разрабатываемый командой Polymer Project в Google, я прекрасно понимаю, что еще предстоит создать прекрасную библиотеку для размещения литература по теме. В настоящее время вам может даже не понадобиться целый газетный киоск, чтобы хранить письменные работы по этой теме. Вот краткий список мест, с которых вы можете начать:

  • Будущее полимера и lit-html Джеймса Гарбутта, глубокое погружение в то, как различные продукты, созданные в рамках проекта Полимер, сравниваются друг с другом.
  • Интернет, это компоненты (их многократное использование), это фреймворки, и это недовольство. и Создание некоторых веб-компонентов следующего поколения, ваш покорный слуга, общее введение в пространство и краткое описание того, как команды, с которыми я работаю, приступают к работе над новыми компонентами, соответственно.
  • И большой список Awesome lit-html, который ведет Сергей Кулыков.
  • react-scripts поставляется как прямая зависимость от приложения React to do в статье Сунила, и одним из побочных преимуществ этого является то, что команда yarn build указывает на эти сценарии и подготавливает ваш код к производству. Та же концепция поддерживается vue-cli-service в версии приложения для Vue. Это замечательно, поскольку ничто из того, что облегчает жизнь разработчика, не должно мешать простоте использования наших пользователей, в том числе отказ от поставки кода среды разработки в производственную среду. Что еще лучше, так это то, что с помощью команды приложение React уменьшится с 388 КБ (по проводам) / 1,5 МБ (проанализировано) до 58 КБ / 187 КБ, что является хорошей победой для ваших пользователей. Более того, я уверен, что процесс сборки все еще довольно наивен, поскольку речь идет о процессах сборки, и было бы место, чтобы сократить дополнительные размеры, прежде чем фактически доставить в производство. В соответствии с этими строками я взломал preact-compat в конфигурацию веб-пакета на основе react-scripts, чтобы посмотреть, что он может делать, и переместил приложение на 230 КБ (по сети) / 875,5 КБ (проанализировано) для приложения разработки с тактовой частотой рабочего приложения 19,6 КБ. / 56КБ, солидный скачок к идеалу. Я с нетерпением жду того момента, когда подниму его сюда, чтобы вдохновить кого-нибудь на создание этого приложения с нуля в Preact, где я ожидаю увидеть еще лучшие результаты! В приложении Vue вы видите приложение разработки размером 1,7 МБ (по сети и после анализа) (похоже, на сервере разработки Vue нет GZIP), уменьшенное до еще меньшего размера - 44,5 КБ (по сети) / 142,8 КБ (после анализа). . Хотя это оба отличные результаты, подход к одной и той же концепции за счет использования polymer build (на основе настроек, которые вы найдете в конфигурации polymer.json для приложения) требует для приложения разработки 35,7 КБ (по проводам) / 77,5 КБ (проанализировано) и превращает его в готовый к производству 14,1 КБ / 59 КБ. Это означает, что весь проанализированный размер приложения LitElement примерно такой же, как и размер провода приложения React, а размер провода составляет всего 1/3 от размера приложения Vue, огромные выигрыши по обоим пунктам для ваших пользователей. . Связывание этих выводов с идеями, изложенными Алексом Расселом в статье Приманка и переключение на« опыт разработчика » - это совсем другой пост, но его очень важно иметь в виду при переходе от технического понимания библиотека или фреймворк для применения этой библиотеки или фреймворка в вашем коде. Такого рода улучшения производительности мы не увидим на наших MacBook Pro за 3000 долларов, но при тестировании с прикладным подключением и замедлением ЦП на мобильных устройствах с Lighthouse вы начинаете понимать, что это может означать для полностью сформированного приложения. Как и в школьной химии, с этими 💯 баллами есть множество нюансов ...

Однако большая часть этого сосредоточена на внутреннем сравнении. Итак, начиная с великой работы, которой Сунил уже поделился с миром, вот моя попытка сделать еще один шаг вперед его уравновешенное сравнение этих библиотек на уровне приложения и включить анализ того же приложения, созданного с помощью LitElement.

Как мы описываем и изменяем данные?

Конечно, есть некоторые различия в том, как файлы структурированы в этом приложении. Polymer CLI не поддерживает _4 _ / _ 5_ различие, которое проявлялось как в приложениях React, так и в Vue, по крайней мере, не сразу из коробки, поэтому я решил не особо с этим бороться. В подтверждение этого решения вы увидите index.html файл на верхнем уровне нашего приложения; это заменяет src/main.js, который вы нашли в приложении Vue, и src/index.js в приложении React в качестве точки входа в приложение. Я уменьшил его для контекста демонстрации, но даже в большинстве контекстов доставки вам не нужно больше, чем:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Lit-Element To Do</title>
    <link rel="stylesheet" href="src/index.css" />
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <to-do></to-do>
    <script type="module" src="./src/ToDo.js"></script>
  </body>
</html>

Есть еще несколько контекстов просмотра, требующих полифилов, и. Мне нравится полагаться на трюк от type="module" до nomodule для поддержки доставки наименьшего объема транспиляции в современные браузеры, но кроме этого, в качестве точки входа в ваше приложение для работы вам не нужно ничего другого.

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

Веб-компоненты могут легко использовать подход с использованием одного файла, который вы видите в Vue, однако здесь я разделил стили в их собственный файл. Вы заметите, что стили импортируются из файла JS, а не из файла CSS. Это сделано для того, чтобы применяемая здесь система импорта более соответствовала возможностям браузера и использовала возможности, предоставляемые lit-html механизм рендеринга, лежащий в основе этого предложения базового класса.

Выше у вас есть стили, примененные к тегу шаблона css, который поддерживает реализацию этого стиля с помощью Конструируемых объектов таблицы стилей, которые позволяют вашим пользовательским элементам использовать один и тот же тег <style/> в нескольких экземплярах. Применение стилей таким образом позволит повысить производительность, поскольку эта функция становится доступной в браузерах и встроена в LitElement для браузеров, которые еще не реализовали этот API. Если вам действительно нравится подход Vue к однофайловым компонентам, ничто не мешает вам сохранить его в том же файле, что и ваши функциональные возможности и шаблон. Однако такое разделение кода упрощает продвижение стилей, включенных в общие стили (те, которые используются в нескольких компонентах вашей базы кода).

Как «ЛитЭлемент» это сделал?

static get properties() {
  return {
    list: {type: Array},
    todo: {type: String},
  };
}
constructor() {
  super();
  this.list = [
    this.todoItem('clean the house'),
    this.todoItem('buy milk')
  ];
  this.todo = '';
}
todoItem(todo) {
  return {todo}
}

Как мы создаем новые задачи?

Прежде всего, LitElement расширяет HTMLElement, что означает, что мы создаем настраиваемые элементы каждый раз, когда мы его используем. Одна из первых суперспособностей, которые дают вам, - это доступ к static get observedAttribute(), который позволяет вам обрисовывать атрибуты вашего элемента для наблюдения. Когда эти атрибуты изменяются, будет вызываться attributeChangedCallback(name, oldValue, newValue), что позволяет вашему элементу реагировать на эти изменения. При использовании LitElement свойства, прослушиваемые в static get properties(), автоматически добавляются к static get observedAttribute(), причем значение этого атрибута применяется к свойству с тем же именем по умолчанию. Если вы хотите (или нуждаетесь) в расширенной функциональности здесь, у вас есть возможность дополнительно настроить, как каждое свойство соотносится с атрибутами элемента и с отображением элемента. Добавив ключ attribute к объекту определения, вы можете установить значение false, если вы не хотите, чтобы рассматриваемое свойство задавалось с помощью атрибута, или предоставить строку для выделения отдельно названного атрибута для наблюдения за значением этого свойства. . Свойство converter используется выше, чтобы обрисовать конкретный способ сериализации значения, установленного для наблюдаемого атрибута, оно будет по умолчанию для соответствующей обработки, когда свойство type установлено в Array, Boolean, Object, Number, String, однако вы можете настроить это с помощью единственного метода двунаправленной сериализации или объекта с ключами fromAttribute и toAttribute, чтобы обозначить сериализацию, которая должна произойти как для использования, так и для публикации этого атрибута. reflect будет отслеживать как логическое значение, следует ли публиковать значение свойства непосредственно в атрибуте при всех изменениях, а hasChanged позволяет вам подготовить собственный метод для проверки того, должны ли изменения значения свойства запускать обновление DOM элемента. Если метод hasChanged не предоставлен, этот тест выполняется путем строгого сравнения идентификаторов JS, что означает, что данные, управляемые LitElement как свойства, хорошо работают с неизменяемыми библиотеками данных. Это расширенное определение свойства может выглядеть так:

static get properties() {
  return {
    roundedNumber: {
      attribute: 'number',
      converter: {
        fromAttribute: (value) => Math.round(parseFloat(value)),
        toAttribute: (value) => value + '-attr'
      },
      reflect: true,
    },
  };
}

Смело смотрите, что происходит в реальной жизни с помощью этого глюка. При таком определении значение this.roundedNumber будет следовать жизненному циклу так же, как и псевдокод ниже:

<my-el                           // the `number` attribute of
  number="5.32-attr"             // <my-el/> is set so we
></my-el>                        // take the value, 5.32-attr
// run fromAttribute method
parseFloat('5.32-attr');         // parseFloat it, 5.32
Math.round(5.32);                // round it, 5
this.roundedNumber = 5;          // store it in `this.roundedNumber`
// CHANGE RECOGNIZED because 5 !== undefined;
// run toAttribute method
5 + '-attr';                     // append '-attr', '5-attr'
this.setAttribute(
  'number',
  '5-attr'
);                               // set it to the attibute

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

Все это скрыто создает getter и setter для каждого свойства, чтобы управлять его значением и вызывать соответствующие методы жизненного цикла при изменении значений, как указано в вашем hasChanged методе. Это означает, что вы можете управлять состоянием напрямую (например, `this.name = 'John';`) так же, как и с Vue, однако вы не сможете запустить обновление шаблона, если не измените идентичность данных (this.list.push({todo:'Does not Mutate Data’}) не меняет идентичность массива, что означает, что новый рендеринг не запускается). Однако при желании поддерживается дополнительная гибкость в вашей грязной проверке (т.е. hasChanged: (newValue, oldValue) => newValue > oldValue инициирует изменение только тогда, когда ваше значение увеличивается, поэтому this.demoValue = this.demoValue + 1 инициирует изменение, а this.demoValue = this.demoValue — 1 нет, если вы видели в этом пользу). У вас также есть возможность написать свои собственные getter и setter, но опять же… в будущем посте.

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

Как «ЛитЭлемент» это сделал?

createNewToDoItem() {
  this.list = [
    ...this.list,
    this.todoItem(this.todo)
  ];
  this.todo = '';
}

Как удалить из списка?

Если первое, что вы сказали, было «это похоже на смесь кода React и Vue для создания нового элемента для выполнения», то вы были бы правы. Прямой доступ к свойствам, предоставляемый Vue, жив и здоров с this.todo = '';, и необходимость в уникальных идентификаторах массивов / объектов React также присутствует с использованием ...this.list, используя оператор распространения для создания массива с уникальным идентификатором, в то же время включающего все данные из предыдущего массива. Таким образом, передача данных в DOM и получение их от события очень похожа на то, что происходило в приложении React, с небольшими отличиями.

<input
  type="text"
  .value=${this.todo}
  @input=${this.handleInput}
/>

Обратите внимание на синтаксис .value=${this.todo}. Здесь вы видите, как шаблон устанавливает для свойства value значение this.todo. Это связано с тем, что value - один из немногих атрибутов, которые не синхронизируются напрямую с одноименным свойством в элементе <input/>. Хотя вы можете получить первое значение this.todo для соответствующей синхронизации, установив только атрибут, будущие изменения (особенно те, которые очищают <input/> после создания нового дела) не будут обновлять пользовательский интерфейс должным образом. Это решает использование свойства value (и, следовательно, синтаксиса .value=${...}), а не атрибута.

После этого вы увидите синтаксис@input, который очень близок к обработке событий, которую мы видели во Vue. Здесь это просто шаблонный шугаринг для addEventListener('input',..., который используется здесь для запуска псевдодвухсторонней привязки, которая управляет значением this.todo. Когда событие input происходит на элементе <input/>, метод handleInput запускается следующим образом, устанавливая значение this.todo равным значению <input/>. (Примечание: здесь используется событие input, а не событие change. Это связано с тем, что change срабатывает только после события blur, что не позволяет кнопке Enter иметь данные для запуска самозаполнения «формы». .)

handleInput(e) {
  this.todo = e.target.value;
}

Как «ЛитЭлемент» это сделал?

deleteItem(indexToDelete) {
  this.list = this.list.filter(
    (toDo, index) => index !== indexToDelete
  );
}

Как передать слушателей событий?

Array.prototype.filter() отлично подходит для работы с данными в этом контексте, потому что по умолчанию он создает массив с новым идентификатором. Здесь мы напрямую устанавливаем значение this.list для отфильтрованного массива, созданного путем удаления элемента в index === indexToDelete, и новое обновление DOM запрашивается в ответ на изменение, отображающее изменение.

Чтобы это стало возможным, мы сначала привяжем метод deleteItem как к this, так и к key (индексу) для элемента в массиве и передадим его как свойство в элемент <to-do-item/>, который отображает отдельного человека в dos.

<to-do-item
  item=${item.todo}
  .deleteItem=${this.deleteItem.bind(this, key)}
></to-do-item>

Этот начальный проход в версии LitElement был реорганизован непосредственно из приложения React, а не из сгенерированного приложения, и как таковой показывает, как большинство используемых там методов были возможны в контексте LitElement. Однако есть некоторые реалии, которые следует учитывать при таком подходе к взаимодействию родителей и детей. Чтобы не прерывать дискуссию о двух подходах к относительности, я сгруппировал это с похожими идеями в Или у нас это есть? ниже.

Как передать данные дочернему компоненту?

<button
  class="ToDo-Add"
  @click=${this.createNewToDoItem}
>+</button>

Здесь мы снова видим, как сокращенный синтаксис Vue проталкивает наши события в React как обработчики. Однако, как и раньше, в шаблоне есть лишь малейшее волшебство (просто сахар), поскольку он применяет addEventListener к рассматриваемому элементу. Вы также заметите, что событие keypress также необходимо обработать полностью.

<input
  type="text"
  @keypress=${this.handleKeyPress}
/>

Событие обрабатывается непосредственно для e.key === ‘Enter', как и в случае с VanillaJS.

handleKeyPress(e) {
  if (e.target.value !== '') {
    if (e.key === 'Enter') {
      this.createNewToDoItem();
    }
  }
}

Как мы отправляем данные обратно в родительский компонент?

<to-do-item
  item=${item.todo}
  .deleteItem=${this.deleteItem.bind(this, key)}
></to-do-item>

Для каждого из наших задач нам нужно передать значение item и deleteItem, чтобы точно раздуть пользовательский интерфейс и активировать функциональность при взаимодействии. В обоих случаях мы упростили свойства, соединив их напрямую с атрибутами, чтобы можно было подумать, что мы можем применять оба свойства напрямую как атрибут. Эта идея отлично работает для item, который сериализуется как String и поэтому легко преобразуется из атрибута в свойство, но для метода deleteItem передача функции таким образом не годится. Вот почему вы увидите .deleteItem синтаксис, означающий, что мы устанавливаем это значение как свойство для элемента <to-do-item/>, а не как атрибут. Мы обсудим нюанс этого подхода в Или у нас есть? ниже.

И вот оно! 🎉

<button class="ToDoItem-Delete"
  @click=${this.deleteItem}>-
</button>

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

Ссылка Github на приложение LitElement:

Вкратце мы рассмотрели некоторые основные концепции использования LitElement, в том числе то, как мы добавляем, удаляем и изменяем данные, передаем данные в форме свойств и атрибутов от родителя к дочернему и отправляем данные от дочернего элемента к родительскому в форме. слушателей событий. Надеюсь, с помощью Я создал точно такое же приложение на React и Vue. Вот отличия . это позволило вам получить четкое представление о том, как LitElement может сравниваться с React или Vue при работе с одним и тем же приложением. Однако, как лучше всего сказал Сунил,

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

Итак, надеюсь, это всего лишь начало вашего исследования, независимо от того, в какую часть постоянно растущей экосистемы JavaScript вы можете попасть.

Github ссылается на оба оригинальных приложения Сунила:



Westbrook / lit-element-todo
Простое приложение LitElement ToDo, созданное для сравнения со статьей, которую я написал в дополнение к… github.com



Или оно у нас есть? (рассматривая влияние некоторых различий)



sunil-sandhu / vue-todo
Простое приложение Vue ToDo, созданное для сравнения статьи React и Vue, которую я разместил на… github.com





sunil-sandhu / react-todo
Простое приложение React ToDo, созданное для сравнения статьи React и Vue, которую я разместил на… github.com



Контексты повторного использования

Если вам нравится сравнение только кода LitElement с React и Vue, пожалуйста, остановитесь здесь. По ту сторону здесь как бы драконы. Создав LitElement для создания приложения в виде приложения React to do, я понял, что есть некоторые методы, общие для веб-компонентов, которые имеют действительно веские основания, и я хотел поделиться им в контексте этого подробного сравнения.

Слабая связь

Частью концепции, лежащей в основе компонентности Интернета, является возможность многократного использования. Мы хотим создавать компоненты, которые мы можем использовать в этом приложении снова и снова, а также иметь возможность использовать их в других приложениях как внутри нашей организации, так и за ее пределами. Думая об этом как о части приложения Vue или React, где единственный контекст для использования компонентов, которые вы создаете, находится внутри приложения Vue или React, легко увлечься легкостью и весельем таких вещей, как передача метод ребенку.

<to-do-item
  .deleteItem=${this.deleteItem.bind(this, key)}
></to-do-item>

Родитель всегда будет внутри приложения, а потомок всегда будет внутри приложения, поэтому этот метод имеет смысл и стал обычным явлением. Настолько банально, что это часто первый вопрос, который я слышу, когда инженеры с опытом работы с React начинают задумываться о работе с веб-компонентами: «Как передать методы детям?» Что ж, ответ выше. Однако, когда вы выбираете это, вы решаете лишить вас одной из сверхспособностей использования платформы, а именно способности работать вне приложения. Были ли у вас проблемы при работе с элементом <input/> вне приложения? Хорошо, глупый вопрос. Были ли эти проблемы чем-то, что нельзя было исправить при небольшом посещении MDN? Однако этот элемент <to-do-item/> на основе LitElement и эквивалентный <ToDoItem /> в приложении React ожидают, что будет доставлен метод для вызова как deleteItem, это означает, что не будет способа применить их с чистым HTML, который не обнаружит, что они выдают ошибку при нажатии . <to-do-item></to-do-item> должна быть предоставлена ​​возможность использовать в этом приложении для выполнения действий, в другом для выполнения приложения или в чем-либо на самом деле, и одна из этих опций находится непосредственно в HTML. Чтобы сделать это возможным, мы хотим взять страницу из приложения Vue to do и связать наши элементы без списков.

Размер доставки

Помимо контекстов повторного использования, которые предотвращает передача метода дочернему элементу, дочерний элемент, требующий предоставления метода, по существу создает восходящую цепочку зависимостей, которую не могут обеспечить текущие инструменты. import {foo} from './bar.js'; может гарантировать, что дочерний граф зависимостей статичен, но у нас нет концепции, требующей функциональности от родителя. Это означает, что разработчик нашего <to-do-item/> компонента должен изучить эту реальность и управлять родителями, в которых он развернут как таковой. Плотная муфта. Приложение Vue to do по большей части избегает этого, вместо того, чтобы вызывать предоставленный метод, оно $emit генерирует событие при нажатии кнопки удаления:

<div class=”ToDoItem-Delete” @click=”deleteItem(todo)”>-</div>
...
deleteItem(todo) {
  this.$emit('delete', todo)
}

Это, конечно, требует немного больше кода, но гибкость, которую он дает нам, потрясающая. Вот тот же код, что и для LitElement на основе <to-do-item/>:

<button
  class="ToDoItem-Delete"
  @click=${this.deleteItem}
>-</button>
...
deleteItem() {
  const event = new CustomEvent('delete', {
    bubbles: true,
    composed: true,
    detail: {todo: this.todo}
  });
  this.dispatchEvent(event);
}

Свойство bubbles должно быть знакомо всем, кто раньше работал с событиями DOM, но свойство composed, вероятно, является новым. Это вариант, который позволяет вашим настраиваемым событиям проникать через границу теневой DOM и пузыриться до внешнего барьера (или более) вашего настраиваемого элемента. Вы также увидите, что значение this.todo добавлено к объекту события в свойстве detail для использования в различных прослушивателях. Следующее будет изменено в родительском элементе, чтобы поддержать это:

<to-do-item
  @delete=${this.deleteItem}
></to-do-item>
...
deleteItem(e) {
  const todo = e.detail.todo;
  this.list = this.list.filter(item => item !== todo);
}

Еще одним преимуществом этого подхода является возможность прослушивания события чем-то другим, кроме непосредственного родителя, чего я не могу сразу найти в соответствующей документации для $emit метода Vue. (Эта документация, кажется, подразумевает, что создается событие, не вызывающее пузырей, но это не совсем ясно по теме.) Когда bubbles === true событие будет пузыриться в вашем приложении до тех пор, пока не будет вызвано e.stopPropagation(), что означает, что его также можно услышать снаружи вашего приложения. Это действительно мощный инструмент для запуска далеко идущих побочных эффектов, а также множественных побочных эффектов и прямой путь отладки к действиям на различных уровнях в вашем приложении или за его пределами. Посмотрите, как это выглядит в полной заявке в ветке event.

«Давайте создавать веб-компоненты! Часть 1: Стандарты »Бенни Пауэрса, первая из серии, посвященной технологиям для« dev.to »

Приложение React To Do

Приложение Preact To Do

Приложение Vue To Do

Приложение LitElement To Do

Да, вы все правильно понимаете, приложение LitElement to do переходит в состояние простоя процессора почти в два раза быстрее, чем приложения React или Vue, с аналогичными результатами почти по всем показателям, которые считаются важными для этого аудита. . Preact вступает в виртуальную связь при развертывании в качестве замены React, что, скорее всего, означает, что он будет работать еще меньше в качестве зависимости сборки по умолчанию. Было бы интересно, если бы это также убрало некоторые из более длительных периодов «первого *», замеченных в ходе аудита. Это означает, что, безусловно, необходимо провести дополнительные исследования производительности нагрузки и указывает на менее четкое решение о том, что является лучшим выбором для управления пользовательским интерфейсом вашего приложения. Я сохраню мысли о будущем, когда Preact должен будет продолжать поддерживать свою собственную компонентную модель и виртуальный механизм DOM, в то время как lit-html имеет возможность еще больше урезать себя с помощью ожидающего предложения «Создание экземпляра шаблона» для будущей публикации.

Приложение LitElement To Do