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），允许组件拥有多个根标签，这在某些布局场景下非常实用。
