Vue Academy · Pelajaran

Makro Vue dan Cadangan Komuniti

Pustaka vue-macros, defineModel percubaan, defineOptions, cadangan setupSFC.

Pelajaran 3 daripada 413 langkah

Makro Vue dan Cadangan Komuniti ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Makro Pengkompil dalam script setup

Dalam <script setup>, Vue menyediakan makro pengkompil — fungsi seperti defineProps dan defineEmits yang diproses pada masa kompilasi, bukan diimport pada masa jalan. Vue 3.4 dan versi selepasnya menambah lebih banyak makro, manakala projek komuniti vue-macros bereksperimen dengan lebih banyak lagi.

vue-macros: Medan Eksperimen

vue-macros ialah pustaka komuniti yang menyediakan makro eksperimen lebih awal daripada (atau melangkaui) teras Vue. Idea yang berjaya kadangkala dinaik taraf menjadi sebahagian daripada teras — defineModel bermula di sini sebelum menjadi stabil.

// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [VueMacros({ plugins: { vue: vue() } })]
})

defineModel: Cara Lama

Sebelum defineModel, melaksanakan v-model pada komponen bermaksud mengisytiharkan prop modelValue dan memancarkan update:modelValue secara manual — panjang lebar dan mudah menyebabkan ralat.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

defineModel: Stabil dalam Vue 3.4

defineModel menjadi stabil dalam Vue 3.4. Ia mengembalikan ref yang boleh ditulis dan disambungkan secara automatik kepada prop serta peristiwa kemas kini. Membacanya memberikan nilai; memberikan nilai kepadanya akan memancarkan kemas kini.

<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>

<template>
  <input v-model="model" />
</template>

defineModel Bernama dan Bertaip

defineModel menyokong model bernama (v-model:title) serta pilihan seperti required dan jenis, seiring dengan defineProps.

<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>

Pelbagai v-model Dipermudah

Dengan model bernama, komponen boleh mendedahkan beberapa pengikatan dua hala dengan kemas — sesuatu yang sebelum ini memerlukan banyak pasangan prop/emit.

<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />

<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->

defineOptions

defineOptions (stabil dalam Vue 3.3) membolehkan anda menetapkan pilihan komponen seperti name dan inheritAttrs secara terus di dalam <script setup>, tanpa memerlukan blok <script> kedua.

<script setup>
defineOptions({
  name: 'UserCard',
  inheritAttrs: false
})
</script>

Mengapa name dan inheritAttrs Penting

name komponen membantu alat pembangun, rekursi dan penyertaan/pengecualian <KeepAlive>. inheritAttrs: false menghentikan penerusan atribut secara automatik supaya anda boleh meletakkan attrs pada elemen dalaman tertentu melalui v-bind="$attrs".

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

Makro Lain yang Penting

Vue turut menawarkan defineExpose (mengawal perkara yang boleh dicapai oleh ref induk), defineSlots (menentukan jenis slot) dan withDefaults (nilai lalai untuk props berasaskan jenis). Mengetahui makro ini melengkapkan set alat <script setup> anda.

<script setup lang="ts">
const props = withDefaults(
  defineProps<{ size?: 'sm' | 'lg' }>(),
  { size: 'sm' }
)
defineExpose({ focus })
</script>

Eksperimen berbanding Stabil: Pilih dengan Bijak

Makro teras yang stabil (defineModel, defineOptions) selamat digunakan dalam pengeluaran. Eksperimen vue-macros berguna untuk prototaip dan penggunaan awal, tetapi API mungkin berubah — hadkan penggunaannya dengan teliti dalam aplikasi yang dihantar kepada pengguna.

Mengikuti Cadangan Komuniti

Idea baharu muncul sebagai RFC dan dalam vue-macros. Mengikuti perkembangan ini membantu anda menjangka hala tuju rangka kerja — dan membolehkan anda memberikan maklum balas sebelum ciri tersebut stabil.

Semakan Ringkas

Uji pemahaman anda tentang makro Vue.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari tentang makro dan cadangan:

vue-macros menempatkan makro eksperimen; sesetengahnya dinaik taraf menjadi sebahagian daripada teras
defineModel (stabil dalam 3.4) memudahkan v-model komponen
Model bernama/bertaip membolehkan pelbagai pengikatan dua hala yang kemas
defineOptions menetapkan name/inheritAttrs dalam <script setup>
Utamakan makro stabil dalam pengeluaran; gunakan eksperimen dengan berhati-hati

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Makro Vue dan Cadangan Komuniti” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Makro Vue dan Cadangan Komuniti”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Makro Vue dan Cadangan Komuniti”?

Pustaka vue-macros, defineModel percubaan, defineOptions, cadangan setupSFC. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Makro Vue dan Cadangan Komuniti” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Mod Vue Vapor: Pengoptimuman Masa Kompilasi
Ekosistem Vite: Plugin dan Peralatan
Makro Vue dan Cadangan Komuniti
Memilih Tindanan Vue yang Tepat untuk 2025+

← Kembali ke Vue Academy