[!info] related notes

• 所属 MOC: Vue MOC
• 核心机制: Vue 响应式系统, Vue Composition API
• 对照理解: React 状态模型 vs Vue3 响应式模型, Vue2 与 Vue3 响应式系统对比
• 配套生态: vue-router, Pinia, vueuse
• 相关主题: vue3-lifecycle, Vue 渲染与更新流程, vue-component-design-principles, Vue 组件通信, vue-conditional-and-list-rendering, vue-router-guards-and-permission-control, vue-router-module-design, vue3-slots, vue-props-and-emit, vue-provide-and-inject, Vue v-model, vue-next-tick, vue3-dollar-event, vue-custom-directives, vue3-ui-interaction, Vue3 虚拟 DOM, vue3-performance-optimization, vue-learning-roadmap, vue-interview-high-frequency, pinia-store-design-patterns

Vue3

Vue3 是一个用于构建用户界面的渐进式 JavaScript 框架。它的主线不是“会几个 API”，而是用响应式状态驱动组件化界面，再配合路由、状态管理和工程化工具构建完整应用。

一句话理解

• 声明式：描述界面应该是什么样，而不是手动操作 DOM
• 响应式：状态变化后，依赖它的视图和逻辑自动更新
• 组件化：把页面拆成可复用、可组合的独立单元
• 渐进式：可以只接入一个局部模块，也可以扩展到完整 SPA

Vue3 为什么和 Vue2 不一样

• 响应式底层从 Object.defineProperty 转向 Proxy
• 主流开发范式从 Options API 转向 Composition API + script setup
• TypeScript 支持、编译优化和复杂逻辑复用体验明显更好
• 新项目生态默认围绕 Vue3 展开，如 vue-router、Pinia、vueuse

学 Vue3 时真正要抓住的主线

1. 先理解组件、模板、事件、条件渲染和列表渲染
2. 再理解 响应式系统：ref、reactive、computed、watch
3. 然后理解 Composition API 如何组织逻辑与复用逻辑
4. 最后进入工程化：vue-router、Pinia、Vite、组件库、请求层和性能优化

如果你同时学过 React，建议把这条对照线一起看：React 状态模型 vs Vue3 响应式模型

Vue3 的知识结构

页面与组件

• 单文件组件：template / script / style
• 组件设计：vue-component-design-principles
• 组件通信：props、emit、slot、provide/inject
• 关系总览：Vue 组件通信
• 模板控制：vue-conditional-and-list-rendering
• 表单绑定：Vue v-model
• DOM 刷新时机：vue-next-tick
• 生命周期：vue3-lifecycle

状态与更新

• 响应式基础：Vue 响应式系统
• 原子能力：ref 和 reactive, Vue 计算属性, watch 和 watchEffect
• 渲染主线：Vue 渲染与更新流程
• 逻辑组织：Vue Composition API
• 渲染与性能：Vue3 虚拟 DOM, vue3-performance-optimization

工程与生态

• 路由：vue-router
• 守卫与权限：vue-router-guards-and-permission-control
• 状态管理：Pinia
• 组合式工具库：vueuse

推荐阅读顺序

1. Vue MOC
2. vue3-lifecycle / vue3-slots
3. Vue 响应式系统
4. Vue Composition API
5. vue-router
6. Pinia
7. Vue3 虚拟 DOM / vue3-performance-optimization

延伸阅读

• 学习顺序导向：vue-learning-roadmap
• 面试整理导向：vue-interview-high-frequency
• 工程实践导向：vue-router-module-design, pinia-store-design-patterns

什么时候回到这篇笔记

• 你想重新建立 Vue3 的整体地图时
• 你已经会写页面，但还说不清状态、组件、生态之间的关系时
• 你需要决定下一步该补哪一层能力时

学习检查

不看正文回答：

1. Vue3 的组件、响应式系统、Composition API、Router、Pinia 分别解决哪一层问题？
2. ref / reactive 与组件 render 之间通过什么机制建立更新关系？
3. Composition API 为什么更适合按业务关注点组织可复用逻辑？
4. Router state、server state、global client state 为什么不应该全部塞进 Pinia？
5. Virtual DOM 与响应式依赖追踪分别解决什么问题？
6. 给一个 Vue3 页面，从状态 ownership、组件边界、路由和副作用四个角度设计结构。

Related notes

• Vue MOC