Vue3에서 EffectScope를 사용하는 방법

Vue 버전 3.2에는 새로운 효과 범위 API가 도입되었습니다. effectScope를 사용하여 생성된 반응성 부작용(예: 계산된 속성 및 리스너)을 캡처할 수 있는 효과 범위를 생성하여 캡처된 부작용을 함께 처리할 수 있습니다. getCurrentScope 메소드를 사용하여 현재 활성화된 효과 범위를 얻을 수 있습니다. 현재 활성화된 효과 범위에 핸들러 콜백 함수를 등록하려면 onScopeDispose를 사용하세요. 이 콜백 함수는 연결된 효과 범위가 중지될 때 호출됩니다.

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理掉当前作用域内的所有 effect
scope.stop()

Vue 설정에서는 초기화 시작 시 응답이 수집됩니다. 인스턴스가 제거되면 응답이 자동으로 추적 해제되는데 이는 매우 편리한 기능입니다.

그러나 이는 컴포넌트 외부에서 사용하거나 독립형 패키지를 작성할 때 매우 번거로운 일이 됩니다. 별도의 파일에서 계산 및 감시에 대한 반응적 종속성을 제거하려면 어떻게 해야 합니까?

샘플 코드, 참조 링크

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch2 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch2)

const stopWatch3 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch3)

위 코드에서는 계산 및 감시의 총 3가지 반응형 종속성을 작성하고 이러한 반응형 종속성의 stopHandle을 배열에 저장했습니다. 즉, 이 배열을 유지해야 함을 의미합니다. 나중에 필요할 때 다음과 같이 모든 응답을 직접 중지할 수 있습니다.

disposables.forEach((f) => f())
disposables = []

특히 일부 복잡하게 결합된 함수 코드를 처리할 때 모든 반응 종속성을 수동으로 수집하는 것은 매우 지루합니다. 구성된 함수에서 생성된 반응적 종속성에 액세스할 수 없으면 이를 수집하는 것을 쉽게 잊어버릴 수 있으며, 이로 인해 메모리 누수 및 예기치 않은 동작이 발생할 수 있습니다.

이 기능은 구성 요소의 setup() 응답 종속성 수집 및 처리 기능을 구성 요소 모델 외부에서 재사용할 수 있는 보다 일반적인 API로 추상화하려는 시도입니다.

또한 구성 요소의 setup() 범위 또는 사용자 정의 범위에서 "분리된" 효과를 생성하는 기능을 제공합니다.

이 기능은 어떤 문제를 해결하나요?

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

여러 구성 요소 간에 기능을 공유하는 구성된 함수가 있는데, 문제는 구성 요소 1이라는 첫 번째 구성 요소가 Foo 반응 종속성 사용을 중지할 때입니다. 전역 변수 foo에 대한 지속적인 효과는 다른 구성 요소 호출에 영향을 미치므로 이 효과를 중지해야 합니다.

위 내용은 Vue3에서 EffectScope를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!