点我+1</button><button @click="decrement">点我-1

通过本章学习，你已经掌握了 Vue Router 的核心概念和基础用法。前面讲了单个组件页面，我们接下来想象一下传统网站：点击导航菜单，浏览器刷新整个页面，等待加载... 这种体验在如今已经过时了。当 URL 变化时，自动切换显示对应的组件，无需刷新页面。对于新手或快速原型开发，Hash模式可以避免部署时的各种路径问题。：Vue 3 路由采用函数式创建，更符合组合式API的设计理念。会自动在激活的

Query参数是URL中?后面的键值对，多个参数用textid=1001&title=今日头条&from=hometexthttps://example.com/article/1001/今日头条path: '/article/:id/:title', // 使用冒号定义参数占位meta: {title: '文章详情'场景推荐方案理由搜索筛选Query参数URL可分享，参数可选详情页面URL美观，

Pinia 是 Vue 官方推荐的下一代状态管理库，可以看作是Vuex 5的正式实现。它专为 Vue 3 和组合式 API 设计。// 定义并导出 store// 状态 - 相当于组件的 datareturn {sum: 6,school: 'Vue3 实战学院',history: [] as number[] // 操作历史记录},// 计算属性 - 相当于组件的 computedgetters

别急，这个设计不是 Vue 团队故意要增加你的打字量，而是为了解决 JavaScript 一个根本性的限制，并带来巨大的灵活性。在 JavaScript 中，对象的属性访问是可以被拦截的。：无论你处理的是字符串、数字，还是一个复杂的对象，只要是用。这是一个非常贴心的语法糖，让你在模板中书写起来更符合直觉。它确保了无论数据类型如何，你都能拥有完美的响应式体验。，首先要明白 JavaScript 中变

记住最好的选择标准：让代码更清晰、更易维护、更符合团队习惯的那个，就是正确的选择。

丢失类型ref 影响reactive 影响根本原因引用断裂高风险高风险响应式包装器被替换值拷贝高风险不影响解构产生值副本嵌套替换不影响高风险新对象未经过代理特定操作不影响中等风险Proxy 拦截限制// 创建具有防御性的 reactivereturn {state,update,setNested// 使用user: { name: '张三' },})= 解决解构丢失问题，必用场景。ref包裹对象

refVue3 的 ref 设计是为了：更好的 TypeScript 支持更一致的响应式体验摆脱this的依赖代价是：初学者需要适应期同一个名字承担了双重含义但一旦习惯后，你会发现这种统一性在复杂组件中反而更有优势。就像学开车，刚开始觉得手动挡麻烦，熟练后就享受那种精准控制的感觉了！Vue3 让ref身兼两职，可以理解为一种概念上的统一。它用初期的学习成本，换来了更好的类型支持、更灵活的代码组织和

关注点分离→逻辑关注点聚合时间轴驱动→逻辑功能驱动配置化编程→组合式编程概念复杂性→模型简化。

customRef是 Vue3 提供的一个高级 API，它允许开发者创建自定义的响应式引用，并对其依赖追踪和更新触发进行精细化的逻辑控制。与普通的ref相比，customRef赋予了我们对响应式过程更底层的控制能力。情况track()trigger()结果适用场景正常使用√√完整的响应式大多数情况省略 track❌√数据变但界面不更新几乎不用省略 trigger√❌依赖追踪但无更新手动控制更新两者