vue3新手入门(6)非常好用的watchEffect监听数据

vue3中watchEffect函数监听用法，watchEffect会立即运行一个函数，与 watch 不同的是，watchEffect 在组件渲染后立即运行，并且会在其依赖的响应式状态变化时重新运行，而不需要明确指定这些依赖。

言下之意就是不需要指定监听的具体数据，就可直接拿来使用了。

watch对比watchEffect

都能监听响应式数据的变化，不同的是监听数据变化的方式不同

watch：要明确指出监视的数据

watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

下面是一个 watchEffect 的使用示例：

<template>  
  <div>  
    <p>Count is: {{ count }}</p>  
    <button @click="increment">增加数量</button>  
  </div>  
</template>  
  
<script>  
import { ref, watchEffect } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    // 使用 watchEffect 监听 count 的变化  
    watchEffect(() => {  
      console.log(`count is: ${count.value}`);  
  
      // 这里可以执行任何基于 count 的副作用  
      // 例如，基于 count 的值进行 API 调用等  
    });  
  
    function increment() {  
      count.value++;  
    }  
  
    // 返回给模板的响应式数据和方法  
    return {  
      count,  
      increment,  
    };  
  },  
};  
</script>

在这个例子中，我们创建了一个名为 count 的响应式引用，并使用 watchEffect 来监听 count 的变化。当 count 的值变化时（例如，通过点击按钮调用 increment 函数时），watchEffect 内部的函数会重新执行，并打印出新的 count 值。

需要注意的是，watchEffect 会自动追踪其执行过程中访问的所有响应式属性作为依赖。在这个例子中，由于我们在 watchEffect 的回调函数中访问了 count.value，因此 count 就成为了这个副作用的依赖。当 count 变化时，Vue 会重新运行这个副作用。