Vue3.2 выпущен, я так взволнован, я больше не могу его изучать!

Vue.js Vuex
Vue3.2 выпущен, я так взволнован, я больше не могу его изучать!

Какой? VUE3.2 выпущен?

Два дня назад рано утром я получил сообщение от Youda Weibo, и Vue 3.2 был выпущен! Ребят, в последнюю версию еще не до конца играли, грядет эта новая версия. Раздел комментариев также скорбит

\

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

Две новые функции вышли из экспериментального статуса

<script setup>а также <style> v-bind.

-----------------------------Вальс Сплит----- ---------

Первый:<script setup>официальный выпускной

Заметил эксперементал с самого начала изучения vue3<script setup>. Поскольку краткий метод письма пользуется спросом у многих людей (письменныйsetup(){return{}}Все это знают), а некоторые даже говорят, что это полная форма vue3. После прочтения описания обновления, эммм... официальный Tucao самый смертоносный.

<script setup>— это синтаксический сахар времени компиляции, который значительно повышает производительность при использовании Composition API в SFC.

Второе: добавить<style> v-bind

а также<style> v-bindНу, проще говоря, динамические значения, определенные компонентом, можно использовать внутри. Приводится официальный пример:

import { ref } from 'vue'
​
const color = ref('red')
</script>
​
<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>
​
<style scoped>
button {
  color: v-bind(color);
}
</style>

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

адрес документа: https://v3.vue js.org/API/emit-script-setup.HTML

Третье: добавить метод defineCustomElement

Vue 3.2 представляет новый метод defineCustomElement, который упрощает создание собственных пользовательских элементов с помощью API компонентов Vue:

import { defineCustomElement } from 'vue'
​
const MyVueElement = defineCustomElement({
  // normal Vue component options here
})
​
// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

Четвертое: повышение производительности

Здесь достаточно места для описания повышения производительности версии 3.2, в которой упоминаются новые инструкции.v-memo, проще говоря, эта директива запомнит часть дерева шаблонов и не только пропустит виртуальные различия DOM, но и полностью пропустит создание новых VNodes. Может использоваться для сложных больших страниц.

Пятое: серверный рендеринг

Наконец, упоминается рендеринг на стороне сервера и новый API-интерфейс Effect Scope. Заинтересованные студенты могут более подробно ознакомиться с обновленным документом.blog.v UE JS.org/posts/v UE-3…

№6: 1024Lab Поговорим еще немного

Я считаю, что многие студенты уже начали его использовать. Как вы можете видеть в документации,

defineProps, defineEmits, defineExpose, withDefaultsпринадлежатьмакрос компилятора, макрос компилятора. В документации также говорится:

They do not need to be imported, and are compiled away when is processed

Их не нужно импортировать, они будут удалены во время компиляции.

Однако, если вы не импортируете его, вы получите сообщение об ошибке.

<script setup lang="ts">
const props = defineProps<{
  value?: number;
}>();
​
const emit = defineEmits<{
  (e: 'update:value', value: number): void;
}>();
</script>
  • Во-первых, eslint сообщит об ошибке:

ESLint: 'defineEmits' is not defined.(no-undef)

На этом этапе вам нужно изменить конфигурацию eslint-plugin-vue.

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}
  • Тогда консоль браузера может сообщить об ошибке после компиляции

defineEmits is not defined

Вы можете обнаружить, что во время компиляции не обрабатываются defineEmits и т. д. Просмотрите браузер, чтобы увидеть, что исходный код defineEmits все еще там, и нарисована красная волнистая линия. На этом этапе вам может потребоваться проверить версию каждого пакета в package.json и версию 2.4.x vite и повторить попытку после обновления.Скомпилированный код должен выглядеть так:

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })

Пункт 7: Наконец, дайте мне плюнуть

Volar, упомянутый You Da на Weibo, — это плагин для vscode, который заставляет веб-вечеринки… плакать…

Но Vue 3.2 + настройка скрипта + машинопись + воляр пахнет так хорошо! Действительно ароматный!

SmartAdmin2.0 также использует последнюю<script setup>Реконструкция, действительно ароматная~

SmartAdmin: GitHub.com/1024-horn/что…

Категории