Vue3中使用Composition API管理组件状态

<template>
  <div>
    {{ state.counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 reactive 创建响应式对象
    const state = reactive({
      counter: 0
    });

    const increment = () => {
      state.counter++;
    };

    return {
      state,
      increment
    };
  }
};
</script>

<template>
  <div>
    {{ counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式的基本数据类型
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };

    return {
      counter,
      increment
    };
  }
};
</script>

<template>
  <div>
    {{ fullName }}
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

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

export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');

    // 使用 computed 创建计算属性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
};
</script>

<template>
  <div>
    {{ counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };

    // 使用 watch 监听 counter 的变化
    watch(counter, (newValue, oldValue) => {
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    });

    return {
      counter,
      increment
    };
  }
};
</script>

<template>
  <div>
    Vue 3 Composition API Example
    <div>
      <h2>Counter: {{ counter }}</h2>
      <button @click="increment">Increment</button>
    </div>
    <div>
      <h2>Full Name: {{ fullName }}</h2>
      <input v-model="firstName" placeholder="First Name">
      <input v-model="lastName" placeholder="Last Name">
    </div>
    <div>
      <p>Message: {{ message }}</p>
      <button @click="updateMessage">Change Message</button>
    </div>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 管理基本数据类型
    const counter = ref(0);
    const increment = () => counter.value++;

    // 使用 reactive 管理对象状态
    const firstName = ref('');
    const lastName = ref('');
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    // 使用 watch 监听数据变化
    const message = ref('Hello, Vue!');
    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    });

    const updateMessage = () => {
      message.value = 'Vue 3 is awesome!';
    };

    return {
      counter,
      increment,
      firstName,
      lastName,
      fullName,
      message,
      updateMessage
    };
  }
};
</script>