VUE3项目实战二

在Vue 3项目中，我们可以使用Composition API来创建更加灵活和可复用的代码。以下是一个简单的Vue 3组件示例，它使用了ref和reactive来实现响应式数据，使用onMounted和onUnmounted生命周期钩子，以及watch来响应数据的变化。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>点击次数: {{ counter }}</p>
  </div>
</template>
 
<script>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
 
export default {
  name: 'MyComponent',
  setup() {
    // 响应式数据
    const counter = ref(0);
    const message = reactive({ text: 'Hello Vue 3!' });
 
    // 方法
    function incrementCounter() {
      counter.value++;
    }
 
    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onUnmounted(() => {
      console.log('组件已卸载');
    });
 
    // 监听器
    watch(counter, (newValue, oldValue) => {
      if (newValue >= 5) {
        message.text = '你已经点击了足够次数！';
      }
    });
 
    // 暴露到模板
    return {
      counter,
      incrementCounter,
      message
    };
  }
};
</script>

这个组件包括了响应式数据(counter和message)、方法(incrementCounter)、生命周期钩子和watch监听器。它展示了如何在Vue 3项目中使用Composition API来更好地组织和管理代码逻辑。