Выпущена первая библиотека компонентов Vue 3

Vue.js

Сильный состав и фон

Поддержка Vite и TypeScript, опыт разработки более плавный, чем у Dove

Я не буду слишком много оценивать и анализировать Vite. Короче говоря, эта вещь действительно немного болтается. Степень шелковистости - это не тот уровень, которого можно достичь с небольшим количеством масла. Это не мечта улучшить эффективность. исследований и разработок.

проще в использовании

На меня все время жаловались, и я редко вношу изменения.Должен сказать, что мы думали и разрабатывали API с нашей собственной точки зрения, всегда думая, что то, что мы предоставляем, является лучшим.

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

Вам больше не нужно учитывать разницу между значением по умолчанию и значением;

Не нужно изучать, что такое v-decorator;

Не нужно изучать JSX;

......

Деструктивное обновление

К сожалению, будучи проще в использовании, 2.0 будет иметь несколько критических обновлений, одна из причин — историческая проблема с багажом, а другая причина — изменения и корректировки Vue3.

Исторический багаж:

1. Параметр слота области версии 1.x поддерживает несколько параметров, потому что он не может поддерживать несколько параметров в синтаксисе шаблона.Vue сначала не думал о сценарии с несколькими параметрами, потому что нижний уровень библиотеки компонентов — это визуализация. используемая функция может использовать несколько параметров, поэтому она поддерживает несколько параметров в версии 1.x, но для разработки шаблонов несколько параметров станут неудобными.

2. Версия 1.x предоставляет в общей сложности два компонента формы (Form, FormModel).Для формы мы ссылаемся на метод реализации формы версии React, который принудительно обновляется через контекст.В Vue 3, если это Метод все еще используется, невозможно наслаждаться оптимизацией производительности, которую дает patchFlag, и это также требует определенных умственных затрат, поэтому в 2.0 мы объединили Form и FormModel и объединили мощные функции Form с простыми в использовании. использовать возможности FormModel для формирования новой версии Form.

Изменения в Vue 3:

1. Двусторонняя привязка v-model и слияние .sync

2. Параметры компонента сглажены, например{ props: {type: 'xxx'}, on: {click: this.handleClick}}изменить на{ type: 'xxx', onClick: this.handleClick }Компонентов задействовано не так много, а стоимость модификации невелика, подробнее смотрите в описании ниже.

2.0 Основные изменения

Корректировки спецификации проекта

  • высота строки от1.5(21px) настроить на1.5715(22px).
  • Базовая регулировка скругления,4pxизменить на2px.
  • Яркость цвета разделительной линии уменьшается на#E8E8E8изменить на#F0F0F0.
  • Цвет фона таблицы по умолчанию изменен с прозрачного на белый.

Настройки совместимости

  • Минимальная поддерживаемая версия IE — IE 11.
  • Минимальная поддерживаемая версия Vue — Vue 3.0.

Скорректированный API

  • Удален LocaleProvider, используйтеConfigProviderальтернатива.
  • Удалено свойство afterClose тега.
  • Объединены FormModel и Form, подробности см. в разделе «Рефакторинг формы» ниже.
  • tabIndex,maxLength,readOnly,autoComplete,autoFocusИзменить на все строчные.
  • Для более удобного использования слота в синтаксисе шаблона все, что связано с xxxRender, renderXxxx изменено на один параметр, включающийitemRender,renderItem,customRender,dropdownRender,dateCellRender,dateFullCellRender,monthCellRender,monthFullCellRender,renderTabBar.
  • Все места, где настроены scopedSlots, единообразно заменяются на слоты.
  • { on, props, attrs, ... }Конфигурация сглажена, например{ props: {type: 'xxx'}, on: {click: this.handleClick}}изменить на{ type: 'xxx', onClick: this.handleClick }, включая соответствующие поля:okButtonProps,cancelButtonProps.
  • xxx.sync изменен на v-model:xxx
  • v-model заменяется на v-model:xxx, особенно в отношении компонентов:
    • Компоненты, для которых v-model изменяется на v-model:checked: CheckableTag, Checkbox, Switch
    • Компоненты, для которых v-model изменяется на v-model:value: Radio, Mentions, CheckboxGroup, Rate, DatePicker.
    • Компоненты, для которых v-model изменяется на v-model:visible: Tag, Popconfirm, Popove, Tooltip, Moda, Dropdown.
    • Компоненты v-model изменены на v-model:activeKey: Collaps, Tabs
    • Компоненты, которые изменяют v-model на v-model:current: Шаги
    • Компоненты v-model изменены на v-model:selectedKeys: Меню

Обновление значка

существуетant-design-vue@1.2.0, мы ввели значок svg (Зачем использовать иконки svg?). API значков, использующий строковые имена, не может быть загружен по требованию, поэтому файлы значков svg вводятся полностью, что значительно увеличивает размер упакованного продукта. В версии 2.0 мы скорректировали API использования значков для поддержки встряхивания дерева, уменьшив размер пакета по умолчанию примерно на 150 КБ (в сжатом виде).

Использование устаревших значков будет прекращено:

<a-icon type="smile" /> <a-button icon="smile" />

В 2.0 будет принято введение по требованию:

<template>
  <smile-outlined />
  <a-button>
    <template v-slot:icon><smile-outlined /></template>
  </a-button>
</template>
<script>
import SmileOutlined from '@ant-design/icons/SmileOutlined';
export default {
  components: {
    SmileOutlined
  }
}
</script>

рефакторинг компонентов

В 1.x мы предоставляем два компонента формы, Form и FormModel. Исходный компонент формы использует v-decorator для привязки данных. В Vue2 мы принудительно запускаем компонент обновления через контекст, но в Vue3 из-за введения patchFlag, и т. д. Оптимизировано, принудительное обновление уничтожило бы преимущества производительности patchFlag. Поэтому в версии 2.0 мы объединили Form и FormModel, сохранили способ использования FormModel, обогатили связанные функции и переименовали его в Form.

Задействованные изменения:

  • Форма добавленаscrollToFirstError,name,validateTriggerсвойства, новыеfinish,finishFailedсобытие, новоеscrollToFieldметод.
  • Добавлен элемент Form.ItemvalidateFirst, validateTrigger, заброшенныйpropсвойства, использованиеnameзаменять.
  • Пути к вложенным полям используют массивы, в прошлом мы использовали . для представления вложенных путей (например, user.name для представления {user: {name: '' } }). Однако в некоторых бэкэнд-системах имена переменных также включают .. Это приводит к тому, что пользователям требуется дополнительный код для преобразования, поэтому в новой версии вложенные пути представлены массивами, чтобы избежать неправильного поведения обработки (например, ['пользователь', 'имя']).
  • validateFields больше не поддерживает обратные вызовы. validateFields будет возвращать объекты Promise, поэтому вы можете выполнить соответствующую обработку ошибок с помощью async/await или then/catch. Больше не нужно проверять, пусты ли ошибки:
// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

изменить на

// v2
validateFields().then(values => {
  // Do something with value
});
Категории