8 - Effect作用域 API(函数变化过程）

[php-chen]

<script setup lang="ts">
import { ref, computed, watch, watchEffect,effectScope  } from "vue"
console.clear()
let counter = ref(1)
let doubled = counter
const scope = effectScope()

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

  
scope.run(()=>{
   doubled = computed(() => counter.value * 2)
  watch(doubled, () => console.log(doubled.value))
	watchEffect(() => console.log(`Count: ${doubled.value}`))
})


const add = setInterval(()=>{
  counter.value++
},200)


setTimeout(() => {
  counter.value++
  clearInterval(add)
  scope.stop()
},2000)  
  

</script>

<template>
  <div>
    <p>
      值1：{{ counter }}
    </p>
       <p>
      值2：{{ doubled }}
    </p>
  </div>
</template>