Vue 3 核心开发笔记
1. 基础语法与绑定
- 插值语法:使用
{{ }}进行文本插值,功能相当于 DOM 的innerText。 - 属性绑定:
v-bind用于单向绑定属性值,简写为:。 - 双向绑定:
v-model用于表单输入的双向数据绑定。
2. 组合式 API (Composition API)
- Hooks:可复用的函数集合。
- Setup 函数:配合组合式 API 使用,返回对象并通过解构获取方法。
const { sum, add, bigSum } = useSum() - 共存性:Vue 3 中选项式和组合式共存。旧语法可访问 setup 上下文,但 setup 不能直接访问旧语法的实例属性。
3. 项目结构与路由
- 文件组织:一般组件放入
components文件夹;路由组件通常放在pages或views文件夹。 - 路由跳转:
- 字符串写法:
to="/path" - 对象写法:
{ name: 'Home' }或{ path: '/home' }
- 字符串写法:
- 入口文件:
main.ts - 根组件:
App.vue
4. 状态管理
- 集中式管理:将共享数据交给集中式管理工具。
- 常用方案:Pinia(推荐)、Redux、Vuex。
- Store:Pinia 落地后的状态存储单元称为 store。
5. 响应式与计算
- Computed:计算属性,基于已有响应式数据计算新值,具有缓存功能,仅依赖变化时重新计算。
- Watch:监听器,用于观察数据变化并执行副作用。
- Function:普通函数不缓存。
6. Vue 3 新特性
- 多根节点:Vue 3 模板支持编写多个根标签。

