8 - Effect作用域 API

[cone41]

<script setup lang="ts">
import { ref, computed, watch, watchEffect, effectScope } from 'vue';

const counter = ref(1);

// use the `effectScope` API to make these effects stop together after being triggered once

const effectRun = effectScope();

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

  watch(doubled, () => {
    console.log(doubled.value);
  });
  watchEffect(() => {
    console.log(`Count: ${doubled.value}`);
  });
});

counter.value = 2;

setTimeout(() => {
  effectRun.stop();
  counter.value = 4;
});
</script>

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