watchEffect工作原理

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>