คุณสร้างลำดับคำสั่งแบบกำหนดเองได้อย่างไร

Question

Accepted Answer

**ลำดับคำสั่งแบบกำหนดเอง** ให้คุณห่อหุ้ม **การจัดการ DOM ระดับต่ำ** เป็นแอตทริบิวต์ `v-*` ที่นำกลับมาใช้ได้ใหม่ ใช้พวกเขาเมื่อคุณต้องการเข้าถึงองค์ประกอบโดยตรง (โฟกัส, การเลื่อน, ไลบรารี DOM ของบุคคลที่สาม) — สิ่งต่างๆที่องค์ประกอบ/อุปสรรค์ไม่ครอบคลุมอย่างเป็นธรรมชาติ ## การกำหนดลำดับคำสั่งของท้องถิ่น ```vue ``` หลักการตั้งชื่อ: ตัวแปร `vFocus` กลายเป็นลำดับคำสั่ง `v-focus` ## ตัวเก็บเรียกคืนลำดับคำสั่ง (สะท้อนวงจรชีวิตของส่วนประกอบ) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## การใช้ค่าการผูกมัดและอาร์กิวเมนต์ ```vue ``` อ็อบเจกต์ `binding` มี `value` (นิพจน์), `arg` (หลังจากโคลอน), `modifiers` (หลังจากจุด) และ `oldValue` ## ตัวอย่างเชิงปฏิบัติ: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## การลงทะเบียนสากล ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## ทำไมมันถึงสำคัญ ลำดับคำสั่งแบบกำหนดเองเป็นเครื่องมือที่เหมาะสมสำหรับ **พฤติกรรม DOM ระดับต่ำที่นำกลับมาใช้ได้ใหม่** — autofocus, click-outside, โหลดรูปภาพแบบ lazy, ระบาย, การรวม DOM ไลบรารีที่ไม่ใช่ Vue พวกเขาเก็บตรรมชาติ DOM ที่จำเป็นเช่นนี้ไว้หลัง(`v-click-outside`) มากกว่าการกระจายอยู่ในการเก็บเรียกคืนวงจรชีวิต การรู้จักตัวเก็บเรียกคืนและอ็อบเจกต์ `binding` (value/arg/modifiers) บวกทำความสะอาดใน `unmounted` ครอบคลุมการใช้งานที่เป็นปฏิบัติ — แม้ว่าสำหรับตรรมชาติ UI ส่วนใหญ่ องค์ประกอบยังคงเป็นตัวเลือกที่ดีกว่า