一口三个馍

Appearance

Vue.js 生态 ​

Vue.js 以其渐进式框架设计和易用性，成为现代前端开发的重要选择。

Vue.js 基础 ​

核心概念 ​

  • 响应式系统: 数据绑定、依赖追踪、更新机制
  • 组件系统: 组件注册、props、事件通信
  • 模板语法: 插值、指令、表达式
  • 生命周期: 创建、挂载、更新、销毁

Vue 3 新特性 ​

  • Composition API: setup函数、ref、reactive
  • 组合式函数: 逻辑复用、自定义hooks
  • Teleport: DOM传送、弹窗渲染
  • Fragments: 多根节点、无包装元素

组件开发 ​

组件基础 ​

  • 单文件组件: template、script、style
  • 组件通信: props down、events up
  • 插槽: 默认插槽、具名插槽、作用域插槽
  • 动态组件: component、keep-alive

高级组件 ​

  • 异步组件: 懒加载、加载状态
  • 递归组件: 树形结构、无限嵌套
  • 函数式组件: 无状态、性能优化
  • 抽象组件: 布局组件、容器组件

状态管理 ​

Vuex 4 (Vue 3) ​

  • 状态树: state、getters、mutations、actions
  • 模块化: namespaced、模块组合
  • 插件: 状态持久化、日志记录
  • 类型支持: TypeScript集成

Pinia (推荐) ​

  • Store定义: defineStore、状态管理
  • 响应式: ref、computed、reactive
  • Actions: 异步操作、状态变更
  • 插件系统: 状态持久化、撤销重做

组合式状态管理 ​

  • useState: 状态逻辑复用
  • useStorage: 本地存储同步
  • 自定义hooks: 业务逻辑封装

路由管理 ​

Vue Router 4 ​

  • 路由配置: 路由定义、嵌套路由、动态路由
  • 导航守卫: 全局守卫、路由守卫、组件守卫
  • 编程式导航: router.push、router.replace
  • 路由元信息: meta字段、权限控制

路由模式 ​

  • Hash模式: #锚点、兼容性好
  • History模式: 干净URL、服务器配置
  • Memory模式: 服务端渲染、测试环境

构建工具 ​

Vite ​

  • 快速启动: 毫秒级热重载
  • 插件系统: Rollup插件兼容
  • 多框架支持: Vue、React、Svelte
  • 生产优化: 代码分割、资源优化

Vue CLI ​

  • 项目脚手架: vue create、图形界面
  • 插件系统: vue add、自定义插件
  • 构建配置: vue.config.js、环境变量
  • 开发服务器: 热重载、代理配置

UI 框架 ​

Element Plus ​

  • 组件丰富: 表单、表格、弹窗、导航
  • 主题定制: CSS变量、暗色主题
  • 国际化: 多语言支持
  • TypeScript: 完整类型定义

Ant Design Vue ​

  • 企业级: 设计规范、组件完整
  • 配置化: 表单配置、表格配置
  • 主题: 动态主题、自定义主题
  • 生态: 周边工具、设计资源

Vant ​

  • 移动端: 移动优先、触摸优化
  • 轻量级: 按需加载、Tree Shaking
  • 定制化: 主题变量、组件定制

表单处理 ​

表单基础 ​

  • 双向绑定: v-model、修饰符
  • 表单验证: 自定义验证、异步验证
  • 表单状态: pristine、dirty、valid

高级表单 ​

  • 动态表单: 字段动态添加、条件显示
  • 表单数组: v-for、数组操作
  • 文件上传: 文件选择、进度显示

性能优化 ​

代码层面 ​

  • 组件懒加载: 异步组件、路由懒加载
  • 计算属性缓存: computed、依赖追踪
  • 事件监听优化: v-on修饰符、事件委托

构建优化 ​

  • 代码分割: 路由分割、组件分割
  • 资源优化: 图片压缩、字体优化
  • 缓存策略: 强缓存、协商缓存

运行时优化 ​

  • 虚拟滚动: 大列表渲染优化
  • 防抖节流: 搜索优化、滚动优化
  • 内存泄漏: 定时器清理、事件解绑

测试 ​

单元测试 ​

  • Vitest: Vue专用测试框架、快速运行
  • Vue Test Utils: 组件测试工具
  • 测试覆盖率: istanbul、覆盖率报告

E2E测试 ​

  • Playwright: 跨浏览器测试、API测试
  • Cypress: 实时重载、调试友好
  • TestCafe: 无需WebDriver、简单配置

服务端渲染 ​

Nuxt.js ​

  • 文件系统路由: pages目录、动态路由
  • 数据获取: asyncData、fetch、nuxtServerInit
  • 中间件: 路由中间件、服务器中间件
  • 插件系统: 客户端插件、服务端插件

SSR优化 ​

  • 缓存策略: 页面缓存、组件缓存
  • 预渲染: 静态生成、增量静态生成
  • 状态管理: 服务端状态、客户端水合

移动端开发 ​

响应式设计 ​

  • 媒体查询: 断点设计、移动优先
  • Flexbox: 弹性布局、响应式布局
  • Grid: 网格布局、复杂布局

PWA ​

  • Service Worker: 离线缓存、后台同步
  • Web App Manifest: 应用清单、安装提示
  • 推送通知: Notification API、推送服务

国际化 ​

Vue I18n ​

  • 基础使用: $t函数、语言切换
  • 组件国际化: 组件作用域、懒加载
  • 日期格式化: 日期本地化、数字格式化
  • 复数处理: 复数规则、自定义复数

最佳实践 ​

  • 键值设计: 命名空间、层级结构
  • 提取工具: 自动化提取、翻译管理
  • SSR支持: 服务端渲染国际化

TypeScript 集成 ​

类型定义 ​

  • 组件类型: Props类型、Emit类型
  • 组合式API: ref类型、computed类型
  • Vuex类型: Store类型、Getter类型

开发体验 ​

  • 自动补全: IDE支持、类型检查
  • 重构安全: 重命名、提取函数
  • 文档生成: 类型即文档

生态工具 ​

开发工具 ​

  • Vue DevTools: 组件检查、状态调试
  • Volar: Vue语言服务、TypeScript支持
  • Vue Snippets: 代码片段、快速开发

辅助库 ​

  • VueUse: 组合式函数集合
  • Vue Router: 路由管理
  • Axios: HTTP客户端

企业级应用 ​

项目结构 ​

  • 目录组织: components、views、store、utils
  • 代码规范: ESLint、Prettier、husky
  • 提交规范: Commitizen、commitlint

部署策略 ​

  • CDN部署: 静态资源优化
  • Docker部署: 容器化部署
  • 微前端: qiankun、single-spa

最佳实践 ​

代码组织 ​

  • 组件设计: 单一职责、可复用性
  • 状态管理: 状态提升、状态下钻
  • 样式管理: Scoped CSS、CSS Modules

性能监控 ​

  • 指标收集: 加载时间、交互时间
  • 错误监控: Sentry、错误边界
  • 用户体验: Core Web Vitals