[!info] related notes

• 所属 MOC: Vue MOC
• 核心机制: Vue 响应式系统, Vue Composition API
• 对照理解: React 状态模型 vs Vue3 响应式模型, Vue2 与 Vue3 响应式系统对比
• 配套生态: vue-router, pinia, vueuse
• 相关主题: vue3-lifecycle, vue-render-and-update-flow, vue-component-design-principles, vue-component-communication, 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-virtual-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-component-communication
• 模板控制：vue-conditional-and-list-rendering
• 表单绑定：vue-v-model
• DOM 刷新时机：vue-next-tick
• 生命周期：vue3-lifecycle

状态与更新

• 响应式基础：Vue 响应式系统
• 原子能力：ref 和 reactive, vue-computed, watch 和 watchEffect
• 渲染主线：vue-render-and-update-flow
• 逻辑组织：Vue Composition API
• 渲染与性能：vue3-virtual-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-virtual-dom / vue3-performance-optimization

延伸阅读

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

什么时候回到这篇笔记

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

Related notes

• Vue MOC