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>
