核心特性
Vue 3 的现代化设计理念
组合式 API
Vue 3 引入的 Composition API,通过 ref、reactive、computed 等函数组织逻辑,支持更好的代码复用和 TypeScript 集成。
响应式系统
基于 Proxy 的细粒度响应式系统,自动追踪依赖、精确更新。Vue 3 的响应式性能大幅优于 Vue 2。
单文件组件 (SFC)
将模板、逻辑和样式组织在一个 .vue 文件中,直观清晰,是 Vue 的标志性特性。
Vapor Mode
Vue 正在开发的编译优化模式,移除 Virtual DOM 开销,生成直接的 DOM 操作代码,性能接近原生 JS。
生态系统
Vue 官方维护的核心库和社区工具
Vue Router
Vue.js 官方路由管理器,支持嵌套路由、导航守卫、路由懒加载等。Vue Router 4 适配 Vue 3。
Pinia
Vue 官方新一代状态管理,取代 Vuex。API 简洁,完美支持 TypeScript 和组合式 API。
VueUse
组合式工具函数集合,提供 200+ 实用函数,覆盖浏览器 API、传感器、动画等场景。
UI 组件库
Element Plus 适合中后台,Naive UI 设计精美,Vant 是移动端首选,Quasar 跨端一体。
Vite
Vue 团队开发的下一代构建工具,基于 ESM 和 esbuild,极速冷启动和 HMR,已成行业标准。
表单与验证
VeeValidate 是最流行的 Vue 表单验证库,FormKit 提供完整的表单构建方案。
全栈框架
基于 Vue 的全栈解决方案
Nuxt.js
Vue 全栈框架,支持 SSR/SSG/ISR,自动导入、文件路由、服务端 API 等开箱即用。
VitePress
基于 Vue 和 Vite 的静态站点生成器,极速构建文档站点,Vue 官方文档即用此构建。
Astro
支持 Vue 的多框架 SSG,采用群岛架构实现零 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>