【vue】Vue 重要基础知识清单
Vue 重要基础知识清单
Vue 作为一款流行的前端框架，拥有丰富的特性和完善的生态系统。以下是 Vue 开发中需要掌握的重要基础知识清单，从核心概念到生态扩展，帮助你系统梳理 Vue 技术栈：
一、核心基础概念
-
Vue 实例与生命周期
- Vue 实例的创建与配置选项
- 完整的生命周期钩子函数（created、mounted、updated、destroyed 等）
- 生命周期钩子的执行时机与应用场景
-
模板语法
- 文本插值（
{{ }}语法） - 原始 HTML 渲染（v-html 指令）
- 指令系统（v-* 特殊属性）
- 过滤器（Filters）的使用与自定义
- 文本插值（
-
数据绑定
- 单向绑定与双向绑定的区别
- v-bind 指令与属性绑定（缩写
:） - v-model 指令与表单元素双向绑定
- 绑定 HTML Class 与 Style 的多种方式
-
事件处理
- v-on 指令与事件绑定（缩写
@） - 事件修饰符（.stop、.prevent、.self 等）
- 按键修饰符（.enter、.tab、.esc 等）
- 自定义事件的触发与监听
- v-on 指令与事件绑定（缩写
-
条件渲染与列表渲染
- v-if、v-else-if、v-else 条件渲染
- v-show 与 v-if 的区别与适用场景
- v-for 列表渲染与 key 属性的重要性
- 数组更新检测与对象变更检测的注意事项
二、组件系统
-
组件基础
- 组件的定义与注册（全局注册、局部注册）
- 组件的模板与样式隔离（scoped）
- 单文件组件（.vue 文件）的结构
-
组件通信
- 父组件向子组件传递数据（props）
- 子组件向父组件传递数据（$emit 与自定义事件）
- 兄弟组件通信方案
- 跨层级组件通信（provide/inject）
-
组件进阶
- 动态组件（component 标签与 is 属性）
- 异步组件与代码分割
- 组件插槽（slot、具名插槽、作用域插槽）
- 递归组件与功能组件
三、过渡与动画
-
过渡系统
- transition 组件的使用
- 进入/离开过渡的 6 个类名
- 自定义过渡类名与 CSS 动画
- JavaScript 钩子函数实现动画
-
列表过渡
- transition-group 组件
- 列表的进入/离开/移动过渡
- 列表过渡中的 key 管理
四、状态管理
-
Vuex/Pinia 核心概念
- 状态（State）的定义与访问
- mutations（同步状态修改）
- actions（异步操作与状态提交）
- getters（派生状态计算）
- modules（状态模块化）
-
Pinia 新特性
- 与 Vuex 的区别与改进
- 组合式 API 风格的状态管理
- 自动类型推断支持
五、路由管理（Vue Router）
-
路由基础
- 路由安装与基本配置
- 路由模式（hash 与 history）
- 路由匹配规则与动态路由
- 嵌套路由与路由组件
-
路由进阶
- 编程式导航（router.push、router.push、router.push、router.replace 等）
- 命名路由与命名视图
- 路由参数与查询参数
- 路由守卫（全局、路由独享、组件内）
- 路由懒加载与代码分割
六、Vue 3 新特性
-
组合式 API
- setup 函数与执行时机
- 响应式 API（ref、reactive、toRefs 等）
- 生命周期钩子的组合式写法
- 依赖注入（provide/inject）
-
其他重要特性
- 多根节点组件（Fragment）
- 更强大的 TypeScript 支持
- 虚拟 DOM 重写与性能优化
- teleport 组件（将内容渲染到指定 DOM 位置）
- Suspense 组件（异步组件加载状态管理）
七、生态工具与实践
-
构建工具
- Vue CLI 的使用与配置
- Vite 构建工具（快速开发体验）
- 项目打包优化
-
开发工具
- Vue Devtools 调试工具
- ESLint + Prettier 代码规范
- 单元测试（Vue Test Utils）
-
常用库与插件
- 表单处理（VeeValidate、Vuelidate）
- HTTP 客户端集成（Axios）
- UI 组件库（Element Plus、Vuetify、Ant Design Vue 等）
掌握这些基础知识，能够帮助你构建稳健、高效的 Vue 应用，并为深入学习 Vue 生态系统打下坚实基础。随着实践的深入，还需要不断探索 Vue 的高级特性和最佳实践，以应对复杂应用的开发挑战。