Vue3 概述

引言

Vue.js 是一款用于构建现代化 Web 应用的渐进式 JavaScript 框架。Vue 3 作为全新大版本，在底层架构、运行性能与开发体验上完成全面升级，主要特点如下：

性能优化：Vue 3 基于 Proxy 重写了响应式系统，替换 Vue 2 的 Object.defineProperty 实现，大幅提升响应式性能与渲染效率，让大型应用运行更流畅
Composition API：推出组合式 API，提供更灵活的逻辑组合与复用能力，解决复杂组件逻辑分散、难以维护的问题，让代码可读性与可维护性显著提升
Teleport 组件：内置 Teleport 传送门组件，可轻松将组件渲染到 DOM 树的指定位置，简化弹窗、全局提示等组件开发，提升布局灵活性
更好的 TypeScript 支持：Vue 3 采用 TypeScript 重构源码，原生支持完善的类型推断与类型检查，无需额外配置即可获得流畅的 TS 开发体验
更小的体积：依托 Tree-shaking 友好的架构设计，Vue 3 核心包体积远小于 Vue 2，实现更快的网络下载与页面加载速度
新增原生能力：支持 Fragment 多根节点、Suspense 异步组件加载、自定义渲染器等特性，适配更多复杂业务场景

https://cn.vuejs.org/

渐进式框架理念

渐进式（Progressive）核心遵循渐进增强的开发理念，即在开发应用时以基础功能为核心底座，逐步叠加高级特性与增强能力，不破坏现有基础功能，让不同设备、浏览器环境都能获得适配的使用体验。

Vue.js 是典型的渐进式 JavaScript 框架，开发者无需一开始就引入框架全部能力，可按需使用：

从简单的嵌套模板与数据绑定开始，快速实现页面交互
逐步引入组件化、路由、状态管理等高级特性
根据项目规模与需求，灵活选用 Vue 生态工具，无需强制全量使用框架功能

前置预备知识

本文档后续内容默认你已对 HTML、CSS 和 JavaScript 具备基础掌握。若你为前端开发新手，不建议直接从框架入门，建议先夯实前端原生基础后再学习 Vue；若拥有其他前端框架使用经验，可快速上手 Vue，无强制前置要求。

什么是 Vue

Vue（发音为 /vjuː/，与 view 同音）是一款专注于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供声明式、组件化的编程模型，可高效开发从简单交互到复杂系统的各类用户界面。

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

# 结果展示，点击按钮时数值会自动累加
Count is: 0

上述示例体现了 Vue 的两大核心能力：

声明式渲染：Vue 基于标准 HTML 扩展模板语法，可声明式描述 JS 状态与最终 HTML 结构的映射关系
数据响应性：Vue 自动追踪 JavaScript 状态变化，当数据更新时响应式更新 DOM，实现数据驱动视图

https://cn.vuejs.org/guide/introduction.html

渐进式的应用场景

Vue 不仅是单一框架，更是覆盖全场景的前端生态系统，可适配多样化的开发需求：

无需构建步骤，渐进式增强静态 HTML 页面
作为 Web 组件嵌入任意现有页面
开发单页应用（SPA）
实现全栈 / 服务端渲染（SSR）
搭建 Jamstack / 静态站点（SSG）
开发桌面端、移动端、WebGL 甚至命令行终端界面

初学者仅需基础 HTML 和 JavaScript 知识即可学习 Vue 教程，资深开发者也可按需选择最适合项目的 Vue 引入方式。

单文件组件

在配备构建工具的 Vue 项目中，统一使用单文件组件（Single-File Components，缩写为 SFC，文件后缀 .vue）开发组件。单文件组件将组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在同一个文件中，是 Vue 的标志性设计。

以下为计数器示例的单文件组件写法：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

单文件组件是 Vue 工程化开发的推荐方案，大幅提升组件的内聚性与可维护性。

现代前端的关注点分离

部分传统 Web 开发者会对单文件组件将 HTML、CSS、JS 集中编写的形式产生顾虑，认为违背了关注点分离原则。但现代前端工程化的核心目标是代码可维护性，关注点分离并非教条式的按文件类型拆分：

传统按语言分层的模式，在复杂应用中易出现逻辑交叉、维护成本高的问题
组件化开发中，模板、逻辑与样式存在强内在关联，集中封装可提升组件内聚性
若偏好拆分文件，Vue 也支持通过资源导入外部 JS、CSS 文件，同时保留热更新、预编译等能力

最终选择贴合团队与项目的开发方式即可，无需固守传统分层理念。

组件 API 风格

Vue 组件支持两种不同的编写风格：选项式 API 和 组合式 API，二者功能等价，可根据项目复杂度自由选择。

选项式 API

使用选项式 API（Options API）时，通过 data、methods、mounted 等选项对象描述组件逻辑，选项定义的属性会通过 this 指向当前组件实例，上手门槛低。

<script>
export default {
  // data 返回响应式状态，挂载到 this
  data() {
    return {
      count: 0
    }
  },

  // methods 定义状态修改与事件处理函数
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子，在组件挂载后执行
  mounted() {
    console.log(`The initial count is ${ this.count }.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API（推荐）

组合式 API（Composition API）通过导入 Vue 内置函数编写组件逻辑，在单文件组件中通常搭配 <script setup> 使用。 setup 属性会让 Vue 在编译时做优化处理，<script setup> 内的导入、顶层变量与函数可直接在模板中使用，代码更简洁。

以下是组合式 API 实现的同功能组件：

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

// 定义响应式状态
const count = ref(0)

// 定义事件处理函数
function increment() {
  count.value++
}

// 注册生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${ count.value }.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

其他补充

渐进增强（Progressive Enhancement）与优雅降级（Graceful Degradation）是 Web 开发中两种经典兼容设计理念，均致力于提升多环境、多设备下的用户体验。

渐进增强

该理念以基础功能与核心内容为起点，确保所有环境均可正常使用核心能力，再逐步为高性能浏览器、设备添加高级特性，实现体验升级。核心侧重向前兼容，保证基础功能永不失效，体验随设备能力逐步提升。

优雅降级

该理念从完整高级功能出发，针对不支持新特性的旧浏览器或设备，自动屏蔽高级能力，保证应用平稳运行不崩溃。核心侧重向后兼容，优先保障高端体验，同时兼容老旧运行环境。