Vue3 前端开发核心知识点
基础语法
- 插值语法:使用
{{ }}进行文本插值,相当于innerText。 - 指令绑定:
v-bind:单项属性绑定。v-model:双向数据绑定。
组合式 API (Composition API)
- Setup 函数:Vue3 入口逻辑,支持选项式和组合式共存。旧语法可访问 setup 内容,但 setup 无法直接访问旧语法定义的数据。
- Hooks:可复用的函数集合,用于封装逻辑。
- 返回值解构:从 Hook 返回对象中解构所需变量。
const { sum, add, bigSum } = useSum(); - 计算属性 (Computed):基于响应式数据计算新值,具有缓存功能,仅依赖变化时重新计算。
- 监听器 (Watch):监听数据变化并执行回调。
- 多根节点:Vue3 支持组件模板中存在多个根标签。
项目结构规范
- 入口文件:
main.ts - 根组件:
App.vue - 目录划分:
- 一般组件:
components文件夹 - 路由组件:
pages或views文件夹
- 一般组件:
- 导入使用:遵循标准组件导入与注册流程。
路由配置
- 导航方式:
- 字符串写法:直接指定路径。
- 对象写法:支持
name跳转或path跳转。
状态管理
- 集中式管理:将共享数据交由统一工具管理,避免 prop drilling。
- 主流方案:Pinia、Redux、Vuex。
- Pinia 落地:在 Pinia 中持久化的数据存储单元称为 Store。
兼容性说明
Vue3 兼容 Vue2 的选项式语法,推荐逐步迁移至组合式风格以提升代码可维护性。

