Зачем использовать vue3
У меня много друзей, которые уже используют vue3 в проектах корпоративного уровня, иногда я прошу их написать vue3 vs vue2.опытв чем разница? Я думал, они скажут бесчисленное количество комплиментов типа быстрее, удобнее. Однако большинство ответов были "Разницы нет, просто написание изменилосьНо сегодня мы собираемся сказать вам, что как можно скорее внедрить vue3, безусловно, очень правильный выбор, не просто «написание изменилось», а реальное повышение производительности!
Некоторые люди могут сказать, что «экология vue3 не идеальна, и есть много ям для использования». . Я предлагаю вам создать проект на основе vite2, если вы сочтете это хлопотным.vitesseЭто базовый шаблон проекта, основанный на vite, который объединяет множество плагинов, которые могут повысить эффективность. Вы можете использовать его напрямую. Перечислите некоторые его особенности:
- vite-plugin-pages, поддерживает автоматически генерируемые маршруты в стиле nuxt
- vite-plugin-vue-layouts, страницы могут свободно комбинировать макеты
- vite-plugin-components Автоматически импортировать общедоступные компоненты (автоматически генерировать импорты и затем вставлять их в компоненты)
- vite-plugin-icons поддерживает множество библиотек иконок
Если вы думаете, что vue3 и vue2 просто меняют способ написания, так что вы не чувствуете улучшения производительности, то, скорее всего, ваш бизнес слишком прост.
В vue2 нам нужно использовать $set при изменении объектов в массиве.
// vue2
data(){
return {
test: [{ a: 1 }]
}
}
this.test[0] = { a:2 } // a的值不会刷新
this.$set(this.test,0,{ a:2 }) // a的值会刷新
// vue3
let test = reactive([{ a: 1 }])
test[0] = { a:2 } // a的值会刷新
В сценариях с более глубоким вложением это значительно повысит эффективность. Например, в визуальном макете информация о вложенных узлах должна быть изменена при генерации кода, что совершенно бесплатно и не требует дополнительных затрат на понимание при написании в vue3.
Второе, что оказало на меня большее влияние, — это комбинированный API, который позволяет объединять мои данные и методы, относящиеся к каждому бизнесу, что значительно упрощает его обслуживание.
Визуальный макет
Новые идеи визуального оформления, в этой статье я объяснил некоторые проблемы с существующим визуальным макетом и идеи по улучшению. Следуя такому ходу мысли, я потратил 11 дней на изготовление прототипа продукта с достаточно хорошей степенью завершенности (не титульная партия, буду делать сам). я звоню емуgrid2flex, что означает, что гибкий макет генерируется макетом сетки. Здесь я хотел бы сосредоточиться на том, как использовать grid2flex.Пожалуйста, сначала терпеливо прочитайте эту часть, а затем адрес онлайн-опыта.
Начните с быстрого создания макетов
В общем визуальном макете, если вы хотите выполнить следующий макет, вам нужно выполнить два шага:
- Перетащите строку, содержащую два столбца
- Поместите элементы управления в col
В grid2flex вам просто нужно создать две ячейки и разместить их рядом:
Нажмите, чтобы сгенерировать код, вы можете получить следующий код, который основан на Vue и въеме:
<template>
<el-row type="flex" justify="start">
<el-col :span="12">
<div></div>
</el-col>
<el-col :span="12">
<div></div>
</el-col>
</el-row>
</template>
<script >
export default {
data() {
return {}
}
}
</script>
<style scoped>
</style>
Давайте рассмотрим более сложные случаи, такие как этот макет:
В обычном визуальном макете нужно растянуть такой макет (слишком много шагов описывать не буду):
В grid2flex это выглядит так:
Сгенерированный код таков:
Что ж, вместо сравнения старых раскладок попробуем раскладку посложнее:
Является ли сгенерированный код тем, что вам нужно?
Создание элементов управления
Вам не нужно перетаскивать, эффективность нажатия будет выше. Щелкая элементы управления на левой панели, вы можете создавать ячейки с шириной и высотой по умолчанию. Затем вы можете свободно настроить его ширину и высоту, чтобы сообщить grid2flex нужный вам макет.
Не буду перечислять остальные функции по порядку, если интересно, можете попробовать сами.grid2flex
Реализация технической точки
Как реализовать сетку
Компоновка сетки выполняетсяvue-grid-layoutДля достижения на его основе можно выполнять блокировку ячеек, копирование, удаление и другие операции, удобную компоновку. Следует отметить, что в настоящее время он не поддерживает vue3, и при его появлении будет сообщено об ошибке.
Как создать элементы управления
Четыре шага:
- Щелчок по элементу управления создаст структуру, аналогичную синтаксическому дереву ast, для записи положения, ширины и высоты элемента управления, а также типа элемента управления.
- Пройдите по этому дереву, добавьте и удалите узлы в соответствии с алгоритмом слияния, чтобы сгенерировать строку и столбец.
- Сгенерировать html-строку на основе нового дерева
- Динамический рендеринг через creatApp, подключение к соответствующему gridItem
Следует отметить, что на четвертом шаге необходимо использовать среду выполнения vue, иначе будет сообщено об ошибке.
Как генерируется код
На третьем этапе создания элемента управления будет сгенерирована строка HTML-тега элемента управления, а затем отформатирована полученная строка с помощью js-beautify. Поместите сгенерированный код в уценку и выделите его с помощью highlight.js, чтобы получить окончательный эффект.
Если вас интересуют какие-то подробности, вы можете пообщаться со мной, я не буду выкладывать здесь код.
перспективы на будущее
На самом деле я не уверен, является ли grid2flex ценным или нет. Я надеюсь, что рынок сможет проверить это с помощью этого прототипа продукта. Если это поможет вам, пожалуйста, дайте мне отзыв. В моем todoList есть еще несколько функций, которые будут поддерживаться в будущем:
- опорный фургон
- Апплет поддержки
- Шаблон поддержки, материальная библиотека
- Поддержка генерации кода в соответствии с различными конфигурациями проекта, такими как sass, less, pug, typescript, preitter, eslint и т. д.
Я Huoye, независимый разработчик, надеющийся принести свет и тепло сообществу своими скудными способностями.