Vue Academy · บทเรียน

Vue Macros และข้อเสนอจากชุมชน

ไลบรารี vue-macros, defineModel แบบทดลอง defineOptions และข้อเสนอ setupSFC

Vue Macros และข้อเสนอจากชุมชน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

มาโครของคอมไพเลอร์ใน script setup

ใน <script setup> Vue มีมาโครของคอมไพเลอร์ให้ใช้ เช่น ฟังก์ชัน defineProps และ defineEmits ซึ่งจะถูกประมวลผลขณะคอมไพล์ ไม่ได้นำเข้าในขณะรันไทม์ Vue 3.4 และรุ่นถัดมาเพิ่มมาโครมากขึ้น และโครงการชุมชน vue-macros ก็ทดลองพัฒนามาโครเพิ่มเติมอีก

vue-macros: พื้นที่สำหรับการทดลอง

vue-macros เป็นไลบรารีจากชุมชนที่นำเสนอมาโครทดลองก่อนที่ Vue แกนหลักจะรองรับ หรืออาจมีความสามารถเกินกว่าที่ Vue แกนหลักมี แนวคิดที่ประสบความสำเร็จบางอย่างอาจถูกนำไปรวมไว้ในแกนหลักในภายหลัง — defineModel เริ่มต้นจากที่นี่ก่อนจะมีความเสถียร

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

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

defineModel: วิธีแบบเดิม

ก่อนมี defineModel การทำให้คอมโพเนนต์รองรับ v-model หมายถึงการประกาศพร็อพ modelValue และส่งอีเวนต์ update:modelValue ด้วยตนเอง ซึ่งมีโค้ดมากและเกิดข้อผิดพลาดได้ง่าย

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

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

defineModel: มีความเสถียรใน Vue 3.4

defineModel มีความเสถียรใน Vue 3.4 โดยส่งคืนรีฟที่เขียนค่าได้ ซึ่งเชื่อมต่อกับพร็อพและอีเวนต์อัปเดตโดยอัตโนมัติ เมื่ออ่านค่าจะได้ค่าปัจจุบัน และเมื่อกำหนดค่า ระบบจะส่งอีเวนต์อัปเดต

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

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

defineModel แบบตั้งชื่อและระบุชนิด

defineModel รองรับโมเดลที่ตั้งชื่อ เช่น v-model:title และตัวเลือกอย่าง required รวมถึงชนิดข้อมูล โดยมีแนวทางเดียวกับ defineProps

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

ใช้ v-model หลายตัวได้ง่ายขึ้น

เมื่อใช้โมเดลที่ตั้งชื่อ คอมโพเนนต์สามารถเปิดเผยการเชื่อมโยงข้อมูลสองทางหลายรายการได้อย่างเป็นระเบียบ ซึ่งก่อนหน้านี้ต้องใช้คู่พร็อพและ emit หลายคู่

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

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

defineOptions

defineOptions ซึ่งมีความเสถียรใน Vue 3.3 ช่วยให้คุณกำหนดตัวเลือกของคอมโพเนนต์ เช่น name และ inheritAttrs ได้โดยตรงภายใน <script setup> จึงไม่จำเป็นต้องมีบล็อก <script> ที่สอง

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

เหตุใด name และ inheritAttrs จึงสำคัญ

name ของคอมโพเนนต์ช่วยในการใช้เครื่องมือสำหรับนักพัฒนา การเรียกใช้แบบวนซ้ำ และการกำหนด include/exclude ของ <KeepAlive> ส่วน inheritAttrs: false จะหยุดการส่งผ่านแอตทริบิวต์โดยอัตโนมัติ ทำให้คุณนำแอตทริบิวต์ไปวางบนองค์ประกอบด้านในที่ต้องการผ่าน v-bind="$attrs" ได้

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

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

มาโครสำคัญอื่น ๆ

Vue ยังมี defineExpose สำหรับควบคุมสิ่งที่รีฟของคอมโพเนนต์แม่เข้าถึงได้ defineSlots สำหรับระบุชนิดของสล็อต และ withDefaults สำหรับกำหนดค่าเริ่มต้นให้พร็อพที่อิงชนิดข้อมูล การรู้จักสิ่งเหล่านี้จะช่วยเติมเต็มชุดเครื่องมือ <script setup> ของคุณ

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

ทดลองกับเสถียร: เลือกใช้อย่างรอบคอบ

มาโครแกนหลักที่มีความเสถียร เช่น defineModel และ defineOptions ปลอดภัยสำหรับระบบจริง การทดลองของ vue-macros มีประโยชน์สำหรับการสร้างต้นแบบและการนำความสามารถใหม่มาใช้ตั้งแต่เนิ่น ๆ แต่ API อาจเปลี่ยนแปลงได้ จึงควรควบคุมการใช้งานอย่างรอบคอบในแอปที่นำไปใช้งานจริง

ติดตามข้อเสนอจากชุมชน

แนวคิดใหม่ ๆ ปรากฏในข้อเสนอการเปลี่ยนแปลงและใน vue-macros การติดตามสิ่งเหล่านี้ช่วยให้คุณคาดการณ์ทิศทางของเฟรมเวิร์กได้ และเปิดโอกาสให้คุณแสดงความคิดเห็นก่อนที่ฟีเจอร์จะมีความเสถียร

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับมาโครของ Vue

สรุป

คุณได้เรียนรู้เกี่ยวกับมาโครและข้อเสนอ:

vue-macros เป็นแหล่งรวมมาโครทดลอง ซึ่งบางรายการอาจถูกนำไปรวมไว้ในแกนหลัก
defineModel ซึ่งมีความเสถียรในรุ่น 3.4 ช่วยให้คอมโพเนนต์ใช้ v-model ได้ง่ายขึ้น
โมเดลที่ตั้งชื่อและระบุชนิดช่วยให้สร้างการเชื่อมโยงข้อมูลสองทางหลายรายการได้อย่างเป็นระเบียบ
defineOptions ใช้กำหนด name และ inheritAttrs ใน <script setup>
ควรใช้มาโครที่มีความเสถียรในระบบจริง และใช้งานสิ่งที่ยังทดลองด้วยความระมัดระวัง

คำถามที่พบบ่อย

บทเรียน “Vue Macros และข้อเสนอจากชุมชน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Vue Macros และข้อเสนอจากชุมชน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Vue Macros และข้อเสนอจากชุมชน”

ไลบรารี vue-macros, defineModel แบบทดลอง defineOptions และข้อเสนอ setupSFC คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Vue Macros และข้อเสนอจากชุมชน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์
ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ
Vue Macros และข้อเสนอจากชุมชน
การเลือกสแตก Vue ที่เหมาะสมสำหรับปี 2025+

← กลับไปที่ Vue Academy