Это первый день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

Количество слов в этой статье: 4708 Чтение полного текста занимает около 20 минут.

Всегда считал, что рамки - это только инструмент, нет необходимости ходить на работу, нет доступа к школе, учитесь использовать время, чтобы идти.

Поэтому у меня есть только предварительное впечатление об очень популярном в Китае фреймворке Vue:

Vue — это прогрессивный JavaScript-фреймворк.
Vue2 реализует отзывчивость через объекты перехвата defineProperty, а Vue3 изменен на Proxy для достижения отзывчивости.
Vue3 добавляет Composite API для решения проблем с повторным использованием кода и ремонтопригодностью.

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

В настоящее время есть35+Владелец компонента заявил об этом60+компоненты 👏🎉🥳

Вот список участников:

git ee.com/Dev UI/v UE-s…

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

Эта статья разрабатывается с точки зрения следующих технологических стеков:

vite@2.4.4
vue@3.1.5
typescript@4.3.5

💡Совет: по состоянию на 7 августа 2021 года версии вышеуказанных библиотек/фреймворков являются последними версиями.

Статья длинная, если вы хотите прочитать краткое содержание, вы можете перейти к следующим главам:6 Резюме

1 Бежим первым

Для новичка самый быстрый способ освоить новую технологию:

Запустите первым

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

Другой - больше думать и учиться с помощью вопросов, память будет глубже, и будет легче понять принципы.

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

Vite — наиболее рекомендуемый инструмент для разработки Vue 3. Я слышал, что он очень плавный, поэтому первый шаг — создать проект Vite и запустить его.

прямая ссылка на официальный сайтНачинатьГлава, одна команда сделает это:

yarn create vite learning-vue3 --template vue-ts

--templateЭтот параметр предназначен для выбора шаблона проекта, что мы выбираемvue-ts:Vue 3 + Typescript + Vite

Помимо создания проектов Vue, Vite также может создавать проекты различных фреймворков, таких как React/Preact/Svelte.

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

$ yarn create vite learning-vue3 --template vue-ts
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-vite@2.5.4" with binaries:
      - create-vite
      - cva
[###########################################################################################################################################################################################################] 232/232
Scaffolding project in /devui/kagol/learning-vue3...

Done. Now run:

  cd learning-vue3
  yarn
  yarn dev

✨  Done in 2.69s.

И очень удобно подсказывать нам следующую команду для выполнения:

Done. Now run:

  cd learning-vue3
  yarn
  yarn dev

Следуйте инструкциям, и мы запустим проект в кратчайшие сроки!

2 Первые впечатления от компонентов Vue

В нижней части всплеск экрана есть гид, давайте редактироватьcomponents/HelloWorld.vueЭтот файл тестирует функцию горячего обновления (HMR).

мы находим этот файлHelloWorld.vue, не спешите его модифицировать, давайте сначала посмотрим на его структуру.

Этот файл.vueСуффикс файла означает, что этоVue组件.

Компонент Vue состоит из трех частей:

наверху есть<template>Этикетка
посередине находится<script lang="ts">Этикетка
Внизу есть<style scoped>Этикетка

HelloWorld.vue.png

Это та же самая структура, которую мы впервые изучили для написания html-страниц на внешнем интерфейсе.HTML/CSS/JavaScriptна три блока.

Однако мы все же замечаем разницу:

Часть HTML используется<template>Эта специальная этикетка завернута;
<script>часть еще однаlang="ts"атрибут, представляющий поддержкуTypeScript;
<style>часть еще однаscopedАтрибут, представляющий локальный стиль, то есть стиль, написанный здесь, предназначен только для текущего компонента Vue.

Выше приведены основные характеристики компонентов Vue, наблюдаемые до сих пор.

3 анализ

мы кладем<template>/<script>/<style>Разверните три вкладки, чтобы увидеть структуру внутри.

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

Мы заметили, что внутри есть некоторые html-элементы, которые вроде бы ничем не отличаются от написания html, но если присмотреться, то будут некоторые отличия:

Первая — это часть, заключенная в двойные фигурные скобки в строке 2.{{ msg }}, который немного отличается от html, который мы написали ранее.Это синтаксис шаблона Vue, называемыйинтерполяция текста, где msg — это переменная компонента, и значение переменной будет отображаться в<h1>внутри этикетки.

<h1>{{ msg }}</h1>

Строка 30 является<button>метка, мы знакомы с этой кнопкой, которая также имеет文本插值, который привязан кcountпеременная, а@clickСвойства, которых мы не видели, это Vueпривязка событийсинтаксис, связывает событие нажатия кнопки.

<button type="button" @click="count++">count is: {{ count }}</button>

Горячее обновление Vite - шаблон

Давайте попробуем изменитьtemplateСодержимое внутри, например, последняя строка:

hot module replacement.

изменить на

hot module replacement(HMR).

Посмотрите, что изменилось на странице.

Vite热更新-template.gif

Как видно из приведенной выше анимации, после модификацииtemplateПосле сохранения файла содержимое страницы обновляется немедленно, задержки почти нет, страница не обновляется, и процесс разработки очень плавный.

猫猫震惊.gif

4

Эта часть является основной частью полного текста, а содержание длинное. Если вы хотите прочитать краткое изложение этой главы напрямую, вы можете щелкнуть ссылку сквозного поезда:4.9 Резюме

У нас есть предварительное понимание шаблонной части, давайте взглянем на скриптовую часть.

4.1 Импорт методов Vue

Первая строка скрипта начинается сvueИмпортируются два метода:

ref: возвращает реактивный и изменяемый объект ссылки;
defineComponent: Используется для определения синхронизированного компонента Vue.

import { ref, defineComponent } from 'vue'

Эти два метода относятся к высокочастотным методам, и их следует иметь в виду.

4.2 Экспортные компоненты Vue

Строка 39 экспортирует компонент Vue.

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup: () => {
    const count = ref(0)
    return { count }
  }
})

defineComponentМетод для определения, параметр метода является объектом, объект имеет 3 свойства:

Имя: имя строки, которая представляет компонент;
props: Объект, представляющий входные параметры компонента, то есть отверстие для взаимодействия компонента с внешним миром.Когда компонент используется извне, к нему можно получить доступ черезpropsПередать данные в компонент;
setup: функция стрелки, новая в Vue3.Composite APIЗапись будет выполнена до того, как компонент будет создан, и после анализа реквизитов.

4.3 Входные параметры компонента

Строка 42 определяет переменную msg, которую мы ранее использовали вtemplateЯ видел его, но какова его ценность?

  props: {
    msg: {
      type: String,
      required: true
    }
  },

Мы заметили, что msg вложен в props, что означает, что это входной параметр компонента и API для взаимодействия компонента с внешним миром, поэтому его значение должно передаваться извне.

Откуда это? Использование компонента по его имениnameиспользовать, поэтому мы ищем имя компонента в исходном коде:HelloWorld, найти вApp.vueиспользуется в:

<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />

4.4 Использование компонентов Vue

Использование компонента почти такое же, как использование обычного html-тега (например, div), с той лишь разницей, что вам нужно импортировать и объявить компонент перед его использованием.

Способ использования компонентов очень прост и требует всего 3 шага:

импортные компоненты
объявление компонентов
использовать компоненты

使用组件.png

4.5 Горячее обновление Vite — скрипт

Попробуем изменить значение этого msg (например, изменить его на:Hello everyone! I'm learning Vue 3 + TypeScript + Vite), чтобы увидеть, как изменится страница.

Vite热更新-script.gif

Как видно из приведенной выше анимации, с модификациейtemplateЭффект тот же.После изменения значения msg, как только файл сохраняется, содержимое страницы сразу обновляется.Предыдущее:

Hello Vue 3 + TypeScript + Vite

Сразу становится:

Hello everyone! I'm learning Vue 3 + TypeScript + Vite

Задержек практически нет, страница не обновляется, а процесс разработки проходит гладко.

猫猫震惊2.gif

4.6 Реактивные объекты ссылки

Строка 48 определяетcountПеременная:

  setup: () => {
    const count = ref(0)
    return { count }
  }

прежде чем мы былиtemplateЯ также видел эту переменную в , и ее значение определено здесьcount, мы замечаем этоcountЗначение называетсяrefВозвращается после функции, параметр функции — число0. Зачем обертывать слой ref вместо того, чтобы напрямую присваивать 0 переменной count?

const count = 0

Разве прямое присвоение не является более кратким?

Давайте сначала взглянем на введение официального сайта в ref:

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property `.value`。

Для того, чтобы понять роль функции ref, давайте сначала попробуем нажать на нее на страницеcount is: 0кнопка.

Нажмите, чтобы увидеть, что значение сразу становится:

count is: 1

На данный момент мы будем:

const count = ref(0)

изменился на:

const count = 0

Нажмите кнопку еще раз и обнаружите, что значение не изменилось.

Мы можем примерно понять возврат функции ref响应式ref对象Имея в виду:

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

Если count не обернут функцией ref, то он не отвечает, и содержимое шаблона не изменится после нажатия кнопки для изменения его значения.

Следует отметить один момент:

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

[Vue warn]: Property "count" was accessed during render but is not defined on instance.

4.7 Поддержка TypeScript

упомянутый ранее<script>серединаlang="ts"Свойства предназначены для поддержки TypeScript, давайте попробуем.

Сначала определите тип типа:

type Size = 'sm' | 'md' | 'lg'

Затем определите переменную в методе настройки для использования этого типа:

const size = ref<Size>('md')

return { size } // 记得返回哦

Наконец, используйте переменную в шаблоне с помощью текстовой интерполяции:

<p>{{ size }}</p>

Так как мы<script>добавленlang="ts", поэтому страница может отображаться нормальноmd.

В это время мы ставимlang="ts"Удалите, сохраните файл и обновите страницу, страница превратится в белую, а в консоли браузера так же сообщается:

Uncaught SyntaxError: unexpected token: identifier

ранее определенSizeШрифт также отображается с красной волнистой линией.

Объявления типа наконечника должны использоваться в файлах TypeScript:

Type aliases can only be used in TypeScript files.

4.8 Подсветка ошибок типа TypeScript

Кажется, что это не видит преимуществ TypeScript.Давайте обогатим эту демонстрацию, чтобы увидеть преимущества TypeScript.

мы добавляемaddSizeметод увеличения размера:

const addSize = () => {
  size.value = 'lg' // 给size变量赋值为Size类型中定义好的值是没问题的
}

return { addSize } // 记得返回哦

существуетtemplateИспользуйте этот метод в:

<button type="button" @click="addSize">Add size</button>

Если вы присваиваете размер значению, определенному типом размера, например:large,VeturПроверка типа появится немедленно, и соответствующий код присвоения также будет подчеркнут красной волнистой линией:

В этот момент мы можем сразу предупредить:

Код здесь может быть неправильно написан

💡 советы:Veturэто плагин VSCode для выполнения.vueПодсветка синтаксиса и проверка типов файлов TypeScript и т. д.

Большое спасибо за то, что дочитали до этого места, и вы закончили чтение за последние 5 минут. Закрепите то, что вы узнали, с помощью резюме, а затем расслабьтесь со стаканом воды 😋

4.9 Резюме

<script>Часть в основном такова, давайте сделаем простое резюме:

Метод defineComponent используется для определения компонентов Vue.
Имя компонента Vue определяется именем атрибута, имя может использоваться для уникального отличия одного компонента.
Компонент VUE взаимодействует с внешним миром через свойство PROPS.
Метод установки — это точка входа в Vue3 Composite API.
Использование компонентов Vue похоже на использование html-элементов, но вам нужно импортировать и объявить компоненты, прежде чем вы сможете их использовать.
ref используется для возврата реактивного объекта
lang="ts"Для поддержки TypeScript

5 Анализ

Наконец, посмотри снова<style>часть.

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

Нет никакой разницы между просмотром и написанием CSS, за исключением одного различия (упомянутого ранее), которое заключается в следующем.<style>добавил тег вscopedАтрибут, этот атрибут используется для определения локального стиля, и стиль, написанный в нем, действует только для текущего компонента.

5.1 Местные стили

Чтобы понять значение местных стилей, мы также пишем<code>Этикетка, см., Если его стиль такой же, как в компоненте HellowOrld. В компоненте HellowOrld стиль метки кода это похоже на это (с серым цветом фона):

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}

Также пишем тег code в App.vue:

<code>Vue DevUI</code>

App.vue.png

Обнаружено, что стиль, написанный в стиле компонента HelloWorld, не влияет на код в компоненте App, который является локальным стилем.

При сравнении html-элементов этих двух компонентов было обнаружено, что все элементы в компоненте HelloWorld добавляются с помощьюdata-v-Специальный атрибут в начале, соответствующее правило css также добавляет этот селектор.

Это и AngularencapsulationСобственность очень похожа.

5.2 Горячее обновление Vite — стиль

Кромеtemplateа такжеscriptГорячее обновление Vite также поддерживаетstyleГорячее обновление стиля, та самая шелковистая гладкость, больше не повторится.

6 Резюме

В этой статье мы использовали Vite, чтобы начать первоначальный проект, и получили предварительное представление о компонентах Vue, а теперь сделаем краткое резюме для консолидации.

Сначала создайте проект Vue3+TypeScript+Vite.
Затем я узнал об общей структуре компонента Vue (.vueфайл, шаблон+скрипт+стиль)
Затем отдельно анализировались блоки шаблона, скрипта и стилей.
Шаблон очень похож на HTML, но добавляет некоторые VUE-специфические模板语法,Такие как文本插值, привязка событий и т. д.
script - это место, где определяется логика компонента, доступ к которому можно получить черезlang="ts"Поддержка TypeScript
defineComponentа такжеref— это два очень распространенных метода, предоставляемых Vue: defineComponent используется для определения компонентов Vue, а ref используется для создания отзывчивого объекта ref.
Параметр метода defineComponent — это объект, в которомnameСвойство используется для определения имени компонента VUE, и на это имя ссылаются при использовании компонента.
Использование компонентов Vue похоже на использование тегов html, за исключением того, что вам нужно сначала импортировать и объявить компоненты.
propsАтрибуты используются для определения API для взаимодействия компонентов с внешним миром и являются ключом к разработке компонентов.
setupМетод Vue3Composite APIзапись, она будет выполнена до создания компонента и после разрешения реквизитов
style используется для записи стиля компонента, который можно передать черезscopedПоддержка локальных стилей, которые применяются только к текущему компоненту.

На этом эта статья заканчивается. Ниже представлено введение в проект с открытым исходным кодом Vue DevUI. Если вам интересно, вы можете продолжить чтение.

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

И библиотека сообщества по сравнению с другими компонентами у нас в основном есть следующие преимущества:

Vue devui спроектирован и разработан на основе дизайнерских ценностей devui, таких как погружение, простота и гибкость, которые были протестированы многими коммерческими проектами devcloud для обеспечения качества и опыта.
Позиционирование vue devui — это кросс-конечная библиотека компонентов, гарантирующая, что она отвечает потребностям ПК/мобильных мультиконечных пользователей.
devui — это команда, ориентированная на пользовательский опыт, за которой стоят более 50 отличных дизайнеров и инженеров, чтобы обеспечить превосходное качество продукта и продвижение технологий.
У нас есть несколько популярных компонентов, таких как диаграмма Ганта, поиск по категориям, навигация по спрайтам, компоненты значков, которые поддерживают как пользовательские значки шрифтов, так и пользовательские svg и т. д.
Мы поддерживаем стандартные функции библиотеки компонентов, такие как загрузка по запросу, настраиваемые темы и интернационализация.

Ниже приведен исходный код проекта:

git ee.com/Dev UI/v UE-s…

Чтобы внести свой вклад, вы можете добавить небольшого помощника WeChat: devui-official, пригласить вас в основную группу участников Vue DevUI~😋😋

Добро пожаловать, чтобы следовать за намиDevUIБиблиотека компонентов, зажгите нашу звездочку 🌟:

GitHub.com/Облако разработки Fe/…

Также добро пожаловать в недавно выпущенный DevUIDevUI AdminСистема из коробки строит красивую и атмосферную систему управления фоном за 10 минут!

Еще один предварительный просмотр: скоро появятся DevUI 12 и DevUI Admin 2.0!

10 числа этого месяца DevUI выпустит версию DevUI 12. Помимо обновления Angular 12, в нем много интересных новых функций, ждите с нетерпением!

Версия DevUI Admin 2.0 также будет выпущена 17-го числа этого месяца, предоставляя волшебную черную технологию, давайте подождем и увидим!

Ссылаться на:

Документация Vue3 на китайском языке