使用Vue.js组合式API构建计算器应用，通过`语法简化代码结构，利用ref管理数字和运算符状态，实现加减乘除基础运算功能，采用响应式数据绑定实时更新显示结果，通过computed属性处理复杂计算逻辑，界面设计简洁直观，包含数字按钮、运算符按钮和清除功能，支持连续运算和小数点处理，组件化开发确保代码可维护性，使用watch`监听状态变化实现动态交互效果，最终形成一个功能完整、响应迅速的实用计算器工具。
Vue.js 3 组合式API实战：从零构建功能完整的计算器
Vue.js 3 自 2020 年发布以来，其推出的组合式API（Composition API）凭借更灵活的逻辑复用、更清晰的代码组织方式，已成为开发者的首选方案，相较于传统的选项式API（Options API），组合式API通过 setup() 函数和响应式API（如 ref、computed、watch 等），让我们能够以"函数式"的思维管理组件逻辑，特别适合处理复杂状态和交互逻辑，这种API设计不仅提高了代码的可维护性，还显著增强了逻辑复用的能力。
本文将通过一个经典案例——计算器，带领大家从零开始，使用 Vue.js 3 的组合式API构建一个功能完整、交互友好的计算器应用，在开发过程中，我们将深入探讨响应式数据管理、事件处理、计算逻辑优化等核心知识点，帮助你快速掌握组合式API的实际应用技巧。
准备工作：环境搭建与项目初始化
在开始编码前,我们需要先搭建一个 Vue.js 3 开发环境，推荐使用 Vite（Vue 官方推荐的前端构建工具），它提供了极速的热更新体验和开箱即用的 TypeScript 支持，能够显著提升开发效率。
创建 Vue 3 项目
执行以下命令,创建一个名为 calculator-app 的 Vue 3 项目：
npm create vite@latest calculator-app -- --template vue
进入项目目录并安装依赖：
cd calculator-app npm install
项目结构
创建完成后,项目结构如下（简化后）：
calculator-app/
├── src/
│ ├── components/ # 组件目录
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html
└── package.json我们将在 src/components 目录下创建 Calculator.vue 组件，实现计算器的核心功能。
组件拆分：计算器的结构设计
一个功能完整的计算器通常包含两个主要部分：
- 显示区域：展示当前输入的数字、计算结果和历史记录，提供清晰的用户反馈
- 按键区域：包括数字键（0-9）、运算符键（+、-、×、÷）、功能键（清除、等于、小数点等）
我们先通过静态 HTML 和 CSS 搭建基础结构，再通过组合式API实现交互逻辑。
创建 Calculator 组件
在 src/components 下创建 Calculator.vue，初始结构如下：
<template>
<div class="calculator">
<!-- 显示区域 -->
<div class="display">
<div class="history">{{ history }}</div>
<div class="result">{{ currentInput || '0' }}</div>
</div>
<!-- 按键区域 -->
<div class="keypad">
<!-- 第一行：清除、括号等 -->
<button class="key key--function" @click="clearAll">AC</button>
<button class="key key--function" @click="toggleSign">+/-</button>
<button class="key key--function" @click="percentage">%</button>
<button class="key key--operator" @click="appendOperator('÷')">÷</button>
<!-- 第二行：数字 7-9 和 × -->
<button class="key" @click="appendNumber('7')">7</button>
<button class="key" @click="appendNumber('8')">8</button>
<button class="key" @click="appendNumber('9')">9</button>
<button class="key key--operator" @click="appendOperator('×')">×</button>
<!-- 第三行：数字 4-6 和 - -->
<button class="key" @click="appendNumber('4')">4</button>
<button class="key" @click="appendNumber('5')">5</button>
<button class="key" @click="appendNumber('6')">6</button>
<button class="key key--operator" @click="appendOperator('-')">-</button>
<!-- 第四行：数字 1-3 和 + -->
<button class="key" @click="appendNumber('1')">1</button>
<button class="key" @click="appendNumber('2')">2</button>
<button class="key" @click="appendNumber('3')">3</button>
<button class="key key--operator" @click="appendOperator('+')">+</button>
<!-- 第五行：0、小数点、等于 -->
<button class="key key--span-2" @click="appendNumber('0')">0</button>
<button class="key" @click="appendDecimal">.</button>
<button class="key key--operator" @click="calculate">=</button>
</div>
</div>
</template>
<script setup>
// 组合式API逻辑将在下一节实现
</script>
<style scoped>
.calculator {
max-width: 320px;
margin: 0 auto;
padding: 20px;
background-color: #2c3e50;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.display {
background-color: #34495e;
padding: 20px;
border-radius: 5px;
margin-bottom: 15px;
text-align: right;
}
.history {
color: #7f8c8d;
font-size: 14px;
min-height: 20px;
}
.result {
color: #ecf0f1;
font-size: 36px;
font-weight: bold;
min-height: 40px;
}
.keypad {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.key {
background-color: #34495e;
color: #ecf0f1;
border: none;
border-radius: 5px;
padding: 20px;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
}
.key:hover {
background-color: #4a5f7a;
}
.key:active {
transform: scale(0.95);
}
.key--operator {
background-color: #e74c3c;
}
.key--operator:hover {
background-color: #c0392b;
}
.key--function {
background-color: #3498db;
}
.key--function:hover {
background-color: #2980b9;
}
.key--span-2 {
grid-column: span 2;
}
</style>
这个组件结构清晰,采用了现代化的设计风格，包含了计算器所需的所有基本功能，我们将使用组合式API实现这些
