Vue3 核心语法与架构规范实战笔记
在模板语法层面,双大括号 {{ }} 用于插值显示,其效果等同于直接操作 DOM 的 innerText。对于属性绑定,v-bind 负责单向绑定属性值,而 v-model 则实现了双向数据绑定,两者在表单交互中各有侧重。
组合式 API(Composition API)引入了 Hooks 的概念,它们本质上是可复用的逻辑函数。在 setup 中,我们通常通过解构返回的对象来获取所需的数据和方法,例如 const { sum, add, bigSum } = useSum()。这种写法让逻辑组织更加灵活,同时也便于类型推导。
响应式系统方面,普通函数不具备缓存能力,每次调用都会重新执行。相比之下,computed 计算属性具有缓存功能,仅当依赖项变化时才会重新计算。如果需要监听数据变化并执行副作用,则应使用 watch。
项目结构上,一般业务组件建议放在 components 目录下,而路由视图组件则归类于 pages 或 views 文件夹。入口文件通常为 main.ts,根组件为 App.vue。
状态管理采用集中式方案,如 Pinia、Vuex 或 Redux。将共享数据交由 Pinia 统一管理,其落地的具体实例即为 Store。路由跳转支持两种写法:字符串路径或包含 name/path 的对象形式,后者更利于重构和维护。
值得注意的是,Vue 3 兼容旧版选项式语法,两者可以共存。虽然旧语法能访问 setup 上下文,但 setup 无法直接读取选项式定义的数据。此外,Vue 3 还支持片段(Fragment),允许组件拥有多个根标签,这在某些布局场景下非常实用。

