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

Pertama: Pengijazahan rasmi

Saya perhatikan 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.

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

Kedua: Tambahkan v-bind

Dan <v-bind, secara ringkasnya, boleh digunakan secara dalaman Nilai dinamik yang ditentukan oleh komponen . Pegawai itu memberi contoh:

import { ref } from 'vue' const color = ref('red') Color is: {{ color }} button { color: v-bind(color); } Salin selepas log masuk 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 Salin selepas log masuk 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 ` ` tags // on the page will be upgraded. customElements.define('my-vue-element', MyVueElement) Salin selepas log masuk 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… Salin selepas log masuk 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 Salin selepas log masuk Mereka tidak perlu diperkenalkan dan akan diproses semasa penyusunan.

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

const props = defineProps (); const emit = defineEmits (); Salin selepas log masuk Pertama sekali, eslint akan melaporkan ralat:

ESLint: 'defineEmits' is not defined.(no-undef) Salin selepas log masuk 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" } } Salin selepas log masuk Kemudian anda boleh menyusun penyemak imbas Konsol akan melaporkan ralat

defineEmits is not defined Salin selepas log masuk 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 }) {} }) Salin selepas log masuk