Vue3.2 telah dikeluarkan, membawakan ciri-ciri baharu ini!

Pertama: be609634581fe1bbacded492a56a3eb3 Pengijazahan rasmi

Saya perhatikan be609634581fe1bbacded492a56a3eb3 Oleh kerana kaedah penulisan ringkas dicari oleh ramai orang (semua orang yang telah menulis persediaan(){return{}} mengetahuinya), sesetengah orang juga mengatakan bahawa ini adalah bentuk lengkap vue3. Selepas membaca penerangan kemas kini, emmm...aduan rasmi adalah yang paling mematikan.

c7c7957f9281cf3b453e6f7f07b7fe53 ialah gula sintaksis masa kompilasi yang meningkatkan produktiviti apabila menggunakan API Komposisi dalam SFC.

Kedua: Tambahkan c9ccee2e6ea535a969eb3f532ad9fe89 v-bind

Dan

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

Oleh kerana laman web rasmi Vue Cina tidak mempunyai kandungan yang dikemas kini buat masa ini, pelajar yang memerlukannya mungkin perlu pergi ke rangkaian luar untuk membaca dokumen Bahasa Inggeris.

Alamat dokumen:

https://v3.vuejs.org/api/sfc-script-setup.html

Ketiga: Kaedah defineCustomElement baharu

Vue 3.2 memperkenalkan kaedah defineCustomElement baharu, yang boleh digunakan API komponen Vue memudahkan untuk mencipta elemen tersuai asli:

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(&#39;my-vue-element&#39;, MyVueElement)

Keempat: Peningkatan prestasi

Terdapat banyak ruang di sini untuk bercakap tentang peningkatan prestasi versi 3.2 . Arahan baru v-memo disebut secara ringkas, arahan ini akan mengingati sebahagian daripada pokok templat, bukan sahaja melangkau perbezaan DOM maya, tetapi juga melangkau sepenuhnya penciptaan VNode baharu. Boleh digunakan untuk halaman besar yang kompleks.

Kelima: Paparan pelayan

Akhir sekali, pemaparan bahagian pelayan dan API Skop Kesan baharu disebut. Pelajar yang berminat boleh melihat dengan lebih dekat dokumen kemas kini.

blog.vuejs.org/posts/vue-3…

No. 6: 1024Lab Mari kita bercakap sedikit lagi

Saya percaya ramai pelajar sudah mula menggunakannya. Seperti yang anda boleh lihat dalam dokumen,

defineProps, defineEmits, defineExpose dan withDefaults tergolong dalam makro pengkompil. Dokumen itu juga menyatakan:

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

Mereka tidak perlu diperkenalkan dan akan diproses semasa penyusunan.

Walau bagaimanapun, jika anda menggunakannya tanpa mengimportnya, ralat akan dilaporkan.

<script setup>
const props = defineProps<{
  value?: number;
}>();
const emit = defineEmits<{
  (e: &#39;update:value&#39;, value: number): void;
}>();
</script>

Pertama sekali, eslint akan melaporkan ralat:

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

Pada masa ini anda perlu menukar konfigurasi 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"
  }
}

Kemudian anda boleh menyusun penyemak imbas Konsol akan melaporkan ralat

defineEmits is not defined

Anda mungkin mendapati bahawa defineEmits dan sebagainya tidak diproses semasa penyusunan Jika anda melihat kod sumber melalui penyemak imbas, defineEmits adalah masih ada dan mempunyai garisan beralun merah. Pada masa ini, anda mungkin perlu menyemak versi setiap pakej dalam package.json dan versi vite 2.4.x dan cuba lagi Kod yang dikompilasi akan kelihatan seperti ini:

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

Atas ialah kandungan terperinci Vue3.2 telah dikeluarkan, membawakan ciri-ciri baharu ini!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!