Vue3 核心语法与状态管理笔记
基础语法与指令
- 插值语法:使用
{{ }}进行文本插值,功能相当于innerText。 - 属性绑定:
v-bind用于单向绑定属性值。 - 双向绑定:
v-model实现数据的双向绑定。
组合式 API 与响应式
- Composition API:通过 hooks 函数调用,返回对象并支持解构,例如
const { sum, add, bigSum } = useSum()。 - Options API 共存:Vue3 兼容 Vue2 语法,旧语法可读取 setup 内容,但 setup 无法读取旧语法定义的数据。
- 计算属性:
computed具有缓存功能,仅当依赖项变化时重新计算。 - 侦听器:
watch用于监听数据变化。 - 函数缓存:普通
function不缓存,computed会缓存结果。
组件与路由
- 目录规范:一般组件放入
components文件夹,路由组件放入pages或views文件夹。 - 路由跳转:支持字符串写法与对象写法(通过
name或path跳转)。 - 入口与根组件:入口文件为
main.ts,根组件为App.vue。
状态管理
- 集中式管理:共享数据交由集中式状态管理工具处理,如 Pinia、Redux、Vuex。
- Pinia:落地的具体实现即为 store。

