предисловие
11 ноября 2019 года на конференции Vue Toronto 2019 @youyuxi поделился «Принципами проектирования Vue 3.0».
Автор этого PPT @ 尤雨溪, автор перевода: дядя Хей 666.
(Примечание: из-за слабого английского языка Uncle Hei, если у вас есть более качественные переводы, вы можете оставить сообщение в области комментариев!)
Перевод: Принципы проектирования для VUE 3.0
Перевод: Быстрое обновление статуса
Перевод: 1 миллион активных пользователей еженедельно по всему миру!
Перевод: Еженедельные загрузки NPM: более 100% по сравнению с прошлым годом
Перевод: Louis Vuitton использует технологии Vue и Nuxt
原文：Вызовы Vue Design
原文：У VUE очень разнообразный набор пользователей
- Новички, которые только начинают работать с HTML и CSS
- Профессионалы переведены из фреймворка JQuery
- Ветеран-кирпичи превратился из другого кадра
- Бэкенд-инженеры ищут легкие решения для фронтенда
- Архитекторы выбирают фундаменты для всей организации
例句：У VUE очень разные сценарии использования
- Внедрение интерактивности в устаревшие приложения
- Разовые проекты, требующие быстрого выполнения, но не требующие долгосрочного обслуживания команды
- Средние проекты предсказуемой сложности
- Ожидается, что крупные проекты будут длиться несколько лет, а команды будут работать
原文：Дизайн включает поиск компромиссов
- API, оптимизированные для простоты, приводят к масштабным проблемам с ремонтопригодностью
- Тяжелые инструменты увеличивают входные барьеры и ограничивают варианты использования
- Больше функций приводит к большему раздуванию
原文：Фреймворки должны учитывать несколько измерений
Перевод: доступность против масштабируемости
Перевод: CDN Build VS Vue Scaffolding
Перевод: API опций и API синтеза
- Зачем вводить другой способ
Перевод: параметры API
- Интуитивно понятный и простой в использовании
- Проблемы масштабируемости в крупномасштабных приложениях
Перевод: Синтез API
- чистая добавка
- Может использоваться с API опций
- Обеспечивает более гибкую организацию кода и возможности повторного использования логики.
- Обеспечивает отличную поддержку машинописного текста
Перевод: TypeScript против JavaScript
- Действительно ли необходим TypeScript?
Перевод: Почему TypeScript:
- Pro: отличная IDE с поддержкой автозаполнения и информации о типе.
- Плюсы: уверенность в рефакторинге старого кода в крупных проектах.
- Минусы: стоимость обучения.
- Минусы: начальная разработка идет медленно
Перевод: In vue 3
- Определения TS также хороши для пользователей JS.
- Компонентный код с использованием TS и JS выглядит практически одинаково.
Перевод: Шаблоны против JSX:
- Зачем предоставлять оба?
例句：Быть инклюзивным фреймворком означает обслуживать пользователей с разным опытом
例句：Кроме того, шаблоны позволяют нам повысить производительность
Перевод: несмотря на то, что Vue обеспечивает минимальные обновления на уровне дерева компонентов, он по-прежнему представляет собой полное различие в каждом экземпляре компонента.
原文：Узкое место традиционного виртуального DOM
- Производительность традиционных VDOM зависит от общего размера шаблона, а не от количества динамического содержимого в шаблоне.
- Полностью динамическая логика рендеринга затрудняет создание безопасных максимальных предположений оптимизации AOT о намерениях пользователя.
原文：Синтаксические ограничения способствуют лучшей оптимизации
例句：Начнем с самого простого примера
- Структура узла не меняется вообще
- только один динамический узел
Перевод: Структура узла изменена: v-if
Перевод: Структура узла изменена: v-if
- v-if снаружи: v-if — единственный динамический узел
- Внутри v-if:{{message}} — единственный динамический узел
Перевод: Изменение структуры узла: v-for
- v-for снаружи: v-for — единственный динамический узел (как осколок)
- Внутри каждой итерации v-for: {{item.message}} — единственный динамический узел
Перевод: Это большое дерево
- Шаблоны разделены на «блоки» на основе структурных директив.
- Внутри каждого блока структура узла полностью статична.
- Просто нужен плоский массив на блок, чтобы отслеживать динамические узлы.
Перевод: в новой стратегии производительность обновления определяется объемом динамического содержимого, а не общим размером шаблона.
Перевод: обновленные тесты производительности
- v-for имеет 1000 итераций
- В каждой итерации 12 элементов DOM вложены на 3 уровня в глубину, 2 привязки динамических классов, 1 интерполяция динамического текста, 1 привязка динамического атрибута id
- Обновите все динамические привязки, запустите в среднем 100 раз
Перевод: мощность против размера
Перевод: дилемма Vue2:
- Каждая новая функция увеличивает размер пакета на пользователя
Перевод: В Vue 3
- Большинство глобальных API и внутренних помощников предоставляются в виде экспорта модуля ES (изменяемое дерево).
- Компилятор также генерирует древовидно-изменяемый код для шаблонов.
- Не платите за функции, которыми никогда не пользуетесь
Перевод: согласованность фреймворка и низкоуровневая устойчивость
Перевод:
- Библиотеки против фреймворков
- Примитивный против абстрактного
- Базар против собора
Перевод: Мелкие преимущества
- Меньше концепций для начала
- Больше гибкости и больше пользовательских возможностей -> активная экосистема
- Меньшая область обслуживания -> команда может сосредоточиться на изучении новых идей
Перевод: Мелкие недостатки
- При решении изначально сложных проблем с помощью простых концепций требуется больше сантехники.
- Со временем шаблоны возникают естественным образом и становятся полуобязательными знаниями, но часто формально не документируются.
- Экосистемы, движущиеся слишком быстро, могут привести к фрагментации и постоянным изменениям
Перевод: Широкий спектр преимуществ
- Наиболее распространенные проблемы можно решить с помощью встроенных абстракций.
- Централизованный процесс проектирования обеспечивает согласованную и целостную экосистему
Перевод: широко распространенные недостатки
- Более высокие нарушения раннего обучения
- Негибкие встроенные решения не подходят для варианта использования
- Большая поверхность обслуживания делает внедрение фундаментальных новых идей еще более четким.
Перевод: Место для прогресса
- Иерархический дизайн, позволяющий постепенно выбирать функции
- Низкий порог неспособности к обучению
- Документация решения распространенных проблем
Перевод: В Vue 3
- Тот же последовательный опыт, что и vue 2
router, Vuex и test-utils получат соответствующие обновления, чтобы соответствовать этому видению.
- еще более низкий уровень гибкости
Первоклассные настраиваемые средства визуализации и настраиваемые API-интерфейсы компилятора