0Pricing
Vue Academy · บทเรียน

มิกซินและคำสั่งกำหนดเอง

นำตรรกะกลับมาใช้ซ้ำด้วยมิกซินและสร้างคำสั่งกำหนดเอง

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

การนำตรรกะกลับมาใช้

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

มิกซินคืออะไร

มิกซิน คือออบเจ็กต์ที่มีตัวเลือกของคอมโพเนนต์ เช่น ข้อมูล เมธอด และฮุก ซึ่งจะถูกรวมเข้ากับคอมโพเนนต์ใดก็ตามที่ใช้งานมิกซินนั้น นี่เป็นวิธีแบบดั้งเดิมในการนำตรรกะกลับมาใช้ใน Vue 2

export const loggerMixin = {
  created() {
    console.log("Component created")
  },
  methods: {
    log(msg) { console.log(msg) }
  }
}

การใช้มิกซิน

เพิ่มมิกซินลงในคอมโพเนนต์ผ่านอาร์เรย์ mixins ตัวเลือกของมิกซินจะถูกรวมเข้ากับตัวเลือกของคอมโพเนนต์เอง

import { loggerMixin } from "./loggerMixin"

export default {
  mixins: [loggerMixin],
  created() {
    this.log("Ready")
  }
}

ข้อเสียของมิกซิน

มิกซินมีปัญหาที่สำคัญหลายอย่าง ได้แก่ ไม่ชัดเจนว่าคุณสมบัติมาจากที่ใด (แหล่งที่มาโดยนัย) ชื่ออาจชนกันระหว่างมิกซิน และกฎการรวมอาจทำให้สับสน ปัญหาเหล่านี้นำไปสู่แนวทางที่ดีกว่า

คอมโพสเซเบิล: วิธีที่ดีกว่า

ใน Vue 3 คอมโพสเซเบิล (ฟังก์ชันที่ใช้ API แบบองค์ประกอบ) เข้ามาแทนที่มิกซิน โดยทำให้แหล่งที่มาชัดเจน หลีกเลี่ยงชื่อที่ชนกัน และนำมาประกอบกันได้อย่างเป็นระเบียบ ควรเลือกใช้คอมโพสเซเบิลสำหรับโค้ดใหม่

import { ref } from "vue"

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

การใช้คอมโพสเซเบิล

เรียกใช้คอมโพสเซเบิลใน setup แล้วแยกเฉพาะสิ่งที่ต้องการออกมา แหล่งที่มาจึงเห็นได้อย่างชัดเจน

import { useCounter } from "./useCounter"

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

คำสั่งกำหนดเองคืออะไร

คำสั่งกำหนดเอง คือชุดพฤติกรรมระดับล่างของ DOM ที่คุณผูกเข้ากับองค์ประกอบด้วย v-name เหมาะสำหรับการจัดการ DOM โดยตรง เช่น การโฟกัส การเลื่อน หรือคำแนะนำเครื่องมือ

การลงทะเบียนคำสั่งทั่วโลก

ลงทะเบียนคำสั่งกับแอปด้วย app.directive โดยจะใช้ชื่อคำสั่งในเทมเพลตพร้อมคำนำหน้า v-

app.directive("focus", {
  mounted(el) {
    el.focus()
  }
})

// usage: <input v-focus />

ฮุกของคำสั่ง

คำสั่งมีฮุกวงจรชีวิต ได้แก่ mounted (แทรกองค์ประกอบแล้ว) updated (อัปเดตคอมโพเนนต์แล้ว) beforeUnmount (การล้างข้อมูล) และฮุกอื่น ๆ ซึ่งสอดคล้องกับวงจรชีวิตของคอมโพเนนต์

app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

ออบเจ็กต์การผูกค่า

อาร์กิวเมนต์ตัวที่สองของฮุกคือการผูกค่า ซึ่งประกอบด้วย value (ค่าที่ส่งเข้ามา) arg (ค่าหลังเครื่องหมายทวิภาค) และ modifiers (ค่าหลังจุด)

// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }

คำสั่งเฉพาะคอมโพเนนต์

สำหรับคำสั่งที่ใช้ในคอมโพเนนต์เดียว ให้ลงทะเบียนคำสั่งแบบเฉพาะที่ด้วยตัวเลือก directives แทนการลงทะเบียนทั่วโลก

export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}

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

ทดสอบความรู้เกี่ยวกับมิกซินและคำสั่งของคุณ

สรุปทบทวน

มิกซิน จะรวมตัวเลือกเข้ากับคอมโพเนนต์ แต่มีปัญหาเรื่องแหล่งที่มาโดยนัยและชื่อที่ชนกัน จึงควรเลือกใช้คอมโพสเซเบิลใน Vue 3 ส่วนคำสั่งกำหนดเองที่ลงทะเบียนด้วย app.directive หรือแบบเฉพาะที่ จะบรรจุพฤติกรรมของ DOM โดยใช้ฮุกอย่าง mounted และออบเจ็กต์การผูกค่า บทถัดไป คุณจะบรรจุฟังก์ชันการทำงานเป็นปลั๊กอินที่นำกลับมาใช้ได้

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

บทเรียน “มิกซินและคำสั่งกำหนดเอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “มิกซินและคำสั่งกำหนดเอง”

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

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

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

บทเรียน “มิกซินและคำสั่งกำหนดเอง” ใช้เวลานานแค่ไหน

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

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

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

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

  1. มิกซินและคำสั่งกำหนดเอง
  2. การพัฒนาปลั๊กอิน
  3. โครงสร้างโฟลเดอร์ที่รองรับการขยาย
← กลับไปที่ Vue Academy