Vuejs 中 watchEffect 函数的作用是什么？

在Vue.js中，watchEffect 函数是一个用于侦听响应式数据的变化并执行一些副作用（side effects）的函数。当被watchEffect包围的响应式状态（reactive state）发生变化时，watchEffect将重新执行。

主要用途

1. 自动侦测依赖：与watch相比，watchEffect不需要明确指定侦听的数据源，它会自动收集依赖。这意味着在watchEffect的回调函数中使用的所有响应式引用都会被侦听。

2. 便于实现副作用逻辑：watchEffect适用于那些需要在数据变化后执行副作用的场景，如数据的自动保存、视图的更新等。

示例

假设你有一个Vue组件，其中包含一个表单和一个用户对象。你想要在用户数据发生变化时自动保存这些数据。使用watchEffect可以简洁地实现这一需求：

vue
<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name">
    <input v-model="user.age" placeholder="Enter your age">
  </div>
</template>

<script>
import { watchEffect, reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: '',
      age: 0
    });

    watchEffect(() => {
      console.log('Detected change in user data:', user);
      // 假设 saveUser 是一个函数用于保存用户数据到服务器
      saveUser(user);
    });

    return { user };
  }
}
</script>

在这个例子中，watchEffect会自动监听user对象中的name和age属性的变化。一旦这些数据有更新，watchEffect内部的代码就会被执行，从而调用saveUser函数来处理数据保存的操作。

总之，watchEffect是一个非常有用的功能，它可以帮助开发者以声明式的方式自动处理响应式数据的变化。