8 - Effect作用域 API

[qiuye-zhou]

// 你的答案
<script setup lang="ts">
import { ref, computed, watch, watchEffect, effectScope } from "vue"

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

// use `effectScope` API to make these effect stop together after triggered once
const scope = effectScope();
scope.run(()=> {
  watch(doubled, () => {
    console.log(doubled.value);
    scope.stop();
  })
  watchEffect(() => console.log("Count: ", doubled.value))
})

counter.value = 2

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

</script>

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