Vue.js

渐进式 JavaScript 框架,易学易用、性能出色、生态丰富。尤雨溪创建,由社区驱动,是中国最受欢迎的前端框架之一。

2014发布年份
社区维护方

核心特性

Vue 3 的现代化设计理念

组合式 API

Vue 3 引入的 Composition API,通过 ref、reactive、computed 等函数组织逻辑,支持更好的代码复用和 TypeScript 集成。

refreactivecomputedwatch

响应式系统

基于 Proxy 的细粒度响应式系统,自动追踪依赖、精确更新。Vue 3 的响应式性能大幅优于 Vue 2。

Proxy依赖追踪自动更新

单文件组件 (SFC)

将模板、逻辑和样式组织在一个 .vue 文件中,直观清晰,是 Vue 的标志性特性。

<template><script setup><style scoped>

Vapor Mode

Vue 正在开发的编译优化模式,移除 Virtual DOM 开销,生成直接的 DOM 操作代码,性能接近原生 JS。

编译优化零VDOM实验性

生态系统

Vue 官方维护的核心库和社区工具

Vue Router

Vue.js 官方路由管理器,支持嵌套路由、导航守卫、路由懒加载等。Vue Router 4 适配 Vue 3。

嵌套路由导航守卫路由懒加载

Pinia

Vue 官方新一代状态管理,取代 Vuex。API 简洁,完美支持 TypeScript 和组合式 API。

Store组合式APIDevTools

VueUse

组合式工具函数集合,提供 200+ 实用函数,覆盖浏览器 API、传感器、动画等场景。

useMouseuseStorageuseFetch

UI 组件库

Element Plus 适合中后台,Naive UI 设计精美,Vant 是移动端首选,Quasar 跨端一体。

Element PlusNaive UIVantQuasar

Vite

Vue 团队开发的下一代构建工具,基于 ESM 和 esbuild,极速冷启动和 HMR,已成行业标准。

ESMHMR插件系统

表单与验证

VeeValidate 是最流行的 Vue 表单验证库,FormKit 提供完整的表单构建方案。

VeeValidateFormKitZod

全栈框架

基于 Vue 的全栈解决方案

Nuxt.js

Vue 全栈框架,支持 SSR/SSG/ISR,自动导入、文件路由、服务端 API 等开箱即用。

自动导入文件路由Nitro引擎

VitePress

基于 Vue 和 Vite 的静态站点生成器,极速构建文档站点,Vue 官方文档即用此构建。

MarkdownSSG主题系统

Astro

支持 Vue 的多框架 SSG,采用群岛架构实现零 JS 水合,极致性能。

群岛架构零JS多框架

快速入门

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

const todos = ref([])
const newTodo = ref('')
const remaining = computed(() =>
  todos.value.filter(t => !t.done).length
)

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, done: false })
    newTodo.value = ''
  }
}
</script>

<template>
  <input v-model="newTodo" @keyup.enter="addTodo" />
  <ul>
    <li v-for="todo in todos" :key="todo.text">
      <input type="checkbox" v-model="todo.done" />
      {{ todo.text }}
    </li>
  </ul>
  <p>剩余: {{ remaining }}</p>
</template>

学习资源

官方文档

全面的指南、教程和 API 参考,支持中文。

vuejs.org/guide →

Vue Mastery

高质量的 Vue 视频课程和教程。

vuemastery.com →

Nuxt 文档

Nuxt.js 官方文档和学习资源。

nuxt.com/docs →