watchEffect工作原理
- 自动依赖收集：watchEffect不需要明确指定要观察的响应式数据，它会自动收集回调函数中用到的所有响应式数据作为依赖。
- 即时执行：watchEffect的回调函数会在组件的setup()函数执行时立即执行一次，以便能够立即收集依赖。
- 重新执行：当依赖的响应式数据发生变化时，watchEffect的回调函数会自动重新执行。
<template> <div> <p>计数器: {{ count }}</p> <button @click="increment">增加</button> </div>
</template> <script setup>
import { ref, watchEffect } from 'vue'; const count = ref(0); watchEffect(() => { console.log(`count 的值是: ${count.value}`);
}); function increment() { count.value++;
} // 假设在某个条件下需要停止侦听
// stopEffect();
</script>
