vue 3 项目实战

在Vue 3项目中，我们可以使用Composition API来创建一个简单的计数器示例。以下是一个基本的计数器组件的代码实例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
 
<script>
import { ref, reactive, toRefs } from 'vue';
 
export default {
  setup() {
    // 使用ref定义响应式的基本类型数据
    const count = ref(0);
 
    // 定义方法
    function increment() {
      count.value++;
    }
 
    function decrement() {
      count.value--;
    }
 
    // 返回到模板中使用
    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

这个组件使用了Vue 3的Composition API。setup函数是一个新的组件选项，它在组件实例被创建时执行，可以用来定义组件的响应式状态和方法。ref函数用来创建一个响应式的引用对象，可以用.value属性来访问或者修改它的值。两个按钮分别调用increment和decrement方法来改变count的值。