vue3 watchEffect

Vue3中的watch和watchEffect都是用来监听数据变化的，但是它们有一些区别：

1. watch是一个选项，需要在组件的选项中定义，而watchEffect是一个函数，可以在组件内部直接使用。

2. watch需要指定要监听的数据和回调函数，当数据变化时，回调函数会被调用。而watchEffect只需要传入一个函数，这个函数中使用到的响应式数据发生变化时，函数会被重新执行。

3. watch可以监听多个数据，而watchEffect只能监听一个函数中使用到的响应式数据。

4. watch可以通过immediate选项来指定是否在组件创建时立即执行回调函数，而watchEffect默认会在组件创建时立即执行一次。

总的来说，watch适用于需要监听多个数据变化的情况，而watchEffect适用于只需要监听一个函数中使用到的响应式数据变化的情况。

---

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue 3!',
    });

    watchEffect(() => {
      console.log('Message changed:', state.message);
    });

    function changeMessage() {
      state.message = 'Hello World!';
    }

    return {
      ...state,
      changeMessage,
    };
  },
};
</script>