0Pricing
Vue Academy · Pelajaran

Makro Vue dan Proposal Komunitas

Pustaka vue-macros, defineModel eksperimental, defineOptions, serta proposal setupSFC.

Makro Vue dan Proposal Komunitas adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Makro Kompiler dalam Penyiapan Skrip

Dalam <script setup>, Vue menyediakan makro kompiler — fungsi seperti defineProps dan defineEmits yang diproses saat kompilasi, bukan diimpor saat eksekusi. Vue 3.4 dan versi setelahnya menambahkan lebih banyak makro, dan proyek komunitas vue-macros bereksperimen dengan lebih banyak lagi.

vue-macros: Lahan Eksperimen

vue-macros adalah pustaka komunitas yang menyediakan makro eksperimental lebih awal daripada (atau di luar) Vue inti. Gagasan yang berhasil terkadang masuk ke inti — 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, menerapkan v-model pada komponen berarti mendeklarasikan prop modelValue dan memancarkan update:modelValue secara manual — panjang dan rentan terhadap kesalahan.

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

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

defineModel: Stabil di Vue 3.4

defineModel menjadi stabil di Vue 3.4. Makro ini mengembalikan ref yang dapat ditulis dan secara otomatis terhubung ke prop serta peristiwa pembaruan. Saat dibaca, nilainya dikembalikan; saat diberi nilai, pembaruan dipancarkan.

<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 Bertipe

defineModel mendukung model bernama (v-model:title) dan opsi seperti required serta tipe, dengan cara yang serupa dengan defineProps.

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

Beberapa v-model Menjadi Mudah

Dengan model bernama, sebuah komponen dapat menyediakan beberapa pengikatan dua arah dengan rapi — sesuatu yang sebelumnya memerlukan banyak pasangan props/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 di Vue 3.3) memungkinkan Anda menetapkan opsi komponen seperti name dan inheritAttrs langsung di dalam <script setup>, sehingga tidak diperlukan blok <script> kedua.

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

Mengapa name dan inheritAttrs Penting

name komponen membantu devtools, rekursi, dan include/exclude pada <KeepAlive>. inheritAttrs: false menghentikan pelolosan atribut otomatis, sehingga Anda dapat menempatkan attrs pada elemen bagian dalam tertentu melalui v-bind="$attrs".

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

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

Makro Penting Lainnya

Vue juga menyediakan defineExpose (mengatur apa yang dapat diakses oleh ref induk), defineSlots (menentukan tipe slot), dan withDefaults (nilai bawaan untuk props berbasis tipe). Dengan memahami semua ini, Anda melengkapi perangkat <script setup>.

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

Eksperimental vs Stabil: Pilih dengan Bijak

Makro inti yang stabil (defineModel, defineOptions) aman digunakan dalam produksi. Eksperimen vue-macros berguna untuk pembuatan prototipe dan adopsi awal, tetapi API-nya dapat berubah — batasi penggunaannya dengan hati-hati dalam aplikasi yang dikirimkan ke pengguna.

Mengikuti Usulan Komunitas

Gagasan baru muncul sebagai RFC dan dalam vue-macros. Dengan mengikutinya, Anda dapat mengantisipasi arah perkembangan kerangka kerja — dan memberikan masukan sebelum fitur-fitur tersebut menjadi stabil.

Pemeriksaan Singkat

Uji pemahaman Anda tentang makro Vue.

Ringkasan

Anda telah mempelajari makro dan usulan:

  • vue-macros menjadi tempat makro eksperimental; beberapa di antaranya masuk ke inti
  • defineModel (stabil di 3.4) menyederhanakan v-model komponen
  • Model bernama/bertipe memungkinkan beberapa pengikatan dua arah yang rapi
  • defineOptions menetapkan name/inheritAttrs dalam <script setup>
  • Utamakan makro stabil dalam produksi; gunakan eksperimen dengan hati-hati

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Makro Vue dan Proposal Komunitas” gratis?

Ya — teks lengkap “Makro Vue dan Proposal Komunitas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Makro Vue dan Proposal Komunitas”?

Pustaka vue-macros, defineModel eksperimental, defineOptions, serta proposal setupSFC. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Makro Vue dan Proposal Komunitas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Mode Vue Vapor: Optimasi Saat Kompilasi
  2. Ekosistem Vite: Plugin dan Peralatan
  3. Makro Vue dan Proposal Komunitas
  4. Memilih Stack Vue yang Tepat untuk 2025+
← Kembali ke Vue Academy