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>