Vue 3 组合式 API 入门

Vue 3 的组合式 API 让逻辑组织更灵活。下面是一个最小可运行的计数器示例。

静态代码展示

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

const count = ref(0)
</script>

<template>
  <button @click="count++">
    点击次数：{{ count }}
  </button>
</template>

实时预览

试着修改下面的代码，右侧会即时渲染效果：

小结

• ref 创建响应式基本类型
• <script setup> 减少样板代码
• 模板中可直接使用响应式变量