watchEffect的完整示例

以下是一个使用watchEffect的完整示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="inputValue" />
    <h2>计算属性：{{ reversedMessage }}</h2>
    <h2>侦听器：{{ fullName }}</h2>
  </div>
</template>

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

export default {
  name: 'WatchEffectExample',
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe',
      inputValue: '',
    });

    const message = computed(() => `Hello, ${state.firstName}`);

    const reversedMessage = computed(() =>
      state.firstName.split('').reverse().join('')
    );

    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    watchEffect(() => {
      console.log(`输入值已更改为：${state.inputValue}`);
    });

    return {
      state,
      message,
      reversedMessage,
      fullName,
    };
  },
};
</script>

在上面的例子中，我们使用了Vue 3的Composition API来创建一个组件WatchEffectExample。我们使用reactive函数来创建一个响应式对象state，其中包含名字的firstName和lastName属性以及输入值的inputValue属性。

我们还使用computed函数创建了两个计算属性message和reversedMessage，分别用于显示“Hello，John”（其中John是state.firstName的值）和反转state.firstName的值。

我们使用另一个计算属性fullName来显示完整的姓名，它将firstName和lastName组合在一起。

最后，我们使用watchEffect来侦听输入值的更改，并在控制台中打印一条消息。这个函数会在组件挂载时自动运行，并在其依赖项（即state.inputValue）更改时重新运行。

在模板中，我们显示了message、reversedMessage和fullName计算属性的值，并使用v-model指令将inputValue与输入框绑定。