Vue Academy · บทเรียน

effectScope สำหรับเอฟเฟกต์แบบกลุ่ม

effectScope() การเรียกใช้ watcher และ computed ในขอบเขตเดียวกัน และ scope.stop() สำหรับล้างข้อมูล

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

ปัญหาการล้างทรัพยากร

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

สิ่งที่ effectScope ทำ

effectScope() จะสร้างขอบเขตที่เก็บรวบรวมเอฟเฟกต์แบบตอบสนองใด ๆ (ตัวเฝ้าดูและค่าที่คำนวณแล้ว) ซึ่งสร้างขึ้นขณะที่ขอบเขตทำงาน ภายหลังคุณสามารถหยุดขอบเขตเพื่อล้างเอฟเฟกต์ทั้งหมดได้ในครั้งเดียว

import { effectScope } from "vue"

const scope = effectScope()

การรวบรวมเอฟเฟกต์ด้วย run

เรียกใช้ scope.run(fn) แล้วสร้างตัวเฝ้าดูและค่าที่คำนวณแล้วภายใน fn เอฟเฟกต์ทุกตัวที่สร้างระหว่างการเรียกครั้งนั้นจะถูกลงทะเบียนไว้กับขอบเขต

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

การหยุดขอบเขต

scope.stop() จะหยุดตัวเฝ้าดูและค่าที่คำนวณแล้วทุกตัวซึ่งสร้างภายในขอบเขตด้วยการเรียกเพียงครั้งเดียว ไม่จำเป็นต้องติดตามตัวจัดการ stop แต่ละตัวแยกกัน

scope.stop() // disposes all watchers and computed at once

เหตุผลที่เรื่องนี้สำคัญ

หากไม่มีขอบเขต คุณต้องเก็บตัวจัดการหยุดของตัวเฝ้าดูแต่ละตัว แล้วเรียกใช้ทีละตัว เมื่อมีเอฟเฟกต์จำนวนมาก วิธีนี้ทำให้เกิดข้อผิดพลาดได้ง่าย ขอบเขตเปลี่ยนการล้างทรัพยากรจำนวน N รายการให้เหลือการเรียกครั้งเดียว

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

ขอบเขตซ้อนกัน

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

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

ขอบเขตแยกอิสระ

ส่งค่า true เพื่อสร้างขอบเขตแยกอิสระที่ไม่ถูกเก็บรวบรวมโดยขอบเขตแม่ที่ครอบอยู่ ใช้เมื่อคุณต้องการควบคุมอายุการใช้งานอย่างเป็นอิสระ

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

กรณีใช้งาน: การสมัครรับข้อมูลระดับปลั๊กอิน

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

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

การสร้างทรัพยากรที่ทำลายได้และใช้ซ้ำ

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

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

ขอบเขตกับคอมโพเนนต์

ภายในการตั้งค่า setup ของคอมโพเนนต์ Vue จะเรียกใช้ขอบเขตโดยนัยที่ผูกกับวงจรชีวิตของคอมโพเนนต์อยู่แล้ว นั่นเป็นเหตุผลที่ตัวเฝ้าดูของคอมโพเนนต์ถูกล้างโดยอัตโนมัติเมื่อถอดคอมโพเนนต์ออก effectScope มอบความสามารถแบบเดียวกันนี้ให้คุณนอกคอมโพเนนต์

getCurrentScope และ onScopeDispose

ภายในขอบเขต คุณสามารถลงทะเบียนการล้างทรัพยากรด้วย onScopeDispose(fn) ซึ่งจะทำงานเมื่อขอบเขตหยุด ลักษณะนี้คล้ายกับ onUnmounted แต่ใช้ได้กับขอบเขตทุกชนิด

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจของคุณเกี่ยวกับ effectScope

สรุปทบทวน

คุณได้เรียนรู้การใช้ effectScope เพื่อจัดกลุ่มเอฟเฟกต์ดังนี้:

effectScope() สร้างขอบเขตที่เก็บรวบรวมเอฟเฟกต์ซึ่งสร้างขึ้นภายในขอบเขต
scope.run(fn) รวบรวมตัวเฝ้าดูและค่าที่คำนวณแล้วซึ่งสร้างใน fn
scope.stop() ล้างทรัพยากรทั้งหมดพร้อมกัน ขอบเขตซ้อนกันจะหยุดพร้อมกับขอบเขตแม่ (ใช้ true สำหรับขอบเขตแยกอิสระ)
onScopeDispose(fn) ลงทะเบียนการล้างทรัพยากรที่จะทำงานเมื่อหยุด
เหมาะอย่างยิ่งสำหรับคอมโพสิเบิลและการสมัครรับข้อมูลแบบตอบสนองระดับปลั๊กอินที่อยู่นอกคอมโพเนนต์

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

บทเรียน “effectScope สำหรับเอฟเฟกต์แบบกลุ่ม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “effectScope สำหรับเอฟเฟกต์แบบกลุ่ม”

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

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

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

บทเรียน “effectScope สำหรับเอฟเฟกต์แบบกลุ่ม” ใช้เวลานานแค่ไหน

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

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

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

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

รีแอกทีฟขั้นสูง: shallowRef และ triggerRef
โรงงานคอมโพสิเบิลและคอมโพสิเบิลแบบรับพารามิเตอร์
เครื่องสถานะด้วย XState ใน Vue
effectScope สำหรับเอฟเฟกต์แบบกลุ่ม

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