Vue3 简介
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架，Vue3 是其最新大版本（2020 年 9 月发布），在性能、代码组织与开发体验上全面超越 Vue2。学会 Vue3，是进入现代前端开发的主流路径。
什么是 Vue
Vue 的核心思想是"数据驱动视图"：我们只维护数据，页面会自动跟着更新，无需手工操作 DOM。
- 渐进式：可以只在一个页面里做模板渲染，也可以配合路由、状态管理搭起大型单页应用。
- 组件化：界面被拆分为独立可复用的组件，便于维护与团队协作。
- 生态成熟：官方路由 Vue Router、状态库 Pinia 与构建工具 Vite 都已全面支持 Vue3。
Vue3 的新特性
- 组合式 API（Composition API）：用 setup 按逻辑组织代码，替代选项式里数据/方法分散的写法。
- 更快：重写虚拟 DOM 并加入编译优化（静态提升、patch flag），运行速度与打包体积都优于 Vue2。
- Proxy 响应式：基于 ES6 Proxy 而非 Object.defineProperty，支持新增属性、数组下标赋值等操作。
- 官方优先支持 TypeScript，配合 Vite 获得极佳的类型提示与开发体验。
- 支持多根节点模板、Teleport 传送门、Suspense 异步组件等新能力。
两种 API 风格对比
<!-- 选项式 API：data / methods 分开书写 -->
<script>
export default {
data() {
return { count: 0 }
},
methods: {
add() { this.count++ }
}
}
</script>
<!-- 组合式 API：同一份逻辑放在 setup 中（本教程为主） -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = () => { count.value++ }
</script>
两者都能实现计数功能；组合式写法更紧凑，也便于把逻辑提取复用。后续章节均以组合式 API 演示，必要时对照选项式。
一个完整的最小示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Vue3 最小示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app">你好，{{ name }}！</div>
<script>
Vue.createApp({
setup() {
return { name: 'Vue3' }
}
}).mount('#app')
</script>
</body>
</html>
页面显示：你好，Vue3！说明 Vue3 已通过 CDN 正常运行——接下来就从安装开始一步步深入。
小结
Vue3 是当前主流的前端框架版本，特点是数据驱动、组件化与组合式 API。下一节介绍如何安装 Vue3 并创建第一个项目。