8 - Effect作用域 API

[landejin]

<script setup lang="ts">
import { ref, computed, watch, watchEffect, effectScope } from "vue"
const scope = effectScope()
const scope2 = effectScope()

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

// use the `effectScope` API to make these effects stop together after being triggered once
scope.run(() => {
  watchEffect(() => console.log(`Count: ${doubled.value}`))
})
  
scope2.run(() => {
  watch(doubled, () => {
    console.log(doubled.value)
    scope2.stop()
  })
})

  
counter.value = 2
scope.stop()

setTimeout(() => {  
  counter.value = 4
})

</script>

<template>
  <div>
    <p>
      {{ doubled }}
    </p>
  </div>
</template>

Vue SFC Playground 在线链接