Vue MOC
Vue3 核心概念、工程实践与生态体系的导航入口。
#tech / dev / frame
#resource / vue3
#type / moc
#status / evergreen
Vue MOC
这张地图只负责导航，不重复展开所有正文。阅读时优先先抓主线，再进入原子笔记。
从哪里开始
核心概念
- vue3 - Vue3 的整体定位与学习主线
- Vue 响应式系统 -
ref、reactive、computed、watch的核心关系 - React 状态模型 vs Vue3 响应式模型 - 对照理解 Vue 响应式和 React state snapshot
- Vue中的ref和reactive - 两种响应式状态容器的差异
- vue-computed - 派生状态与缓存
- Vue中的watch和watchEffect - 侦听副作用的边界
- 手写 Vue reactive 和 watchEffect 的最小实现 - 手写题常见最小模型
- Vue Composition API - Vue3 的主流逻辑组织方式
- vue-script-setup - Composition API 的主流单文件组件写法
- vue-script-setup-macros -
defineProps、defineEmits、defineModel的边界 - vue-script-setup-advanced-macros -
withDefaults、defineExpose、defineSlots的边界 - vue-define-model -
defineModel与v-model、props/emit的关系 - vue-define-model-vs-props-and-emit-selection -
defineModel与显式通信的选择边界 - vue-render-and-update-flow - 状态变化到 DOM 更新的主线
- vue3-lifecycle - 生命周期时机
- vue-component-design-principles - 组件职责与复用边界
- vue-component-communication - 组件通信方式总览
- vue-conditional-and-list-rendering -
v-if、v-show、v-for与key的判断题 - vue3-slots - 插槽与组件组合
- Vue中的props和emit - 组件通信边界
- Vue中的provide和inject - 跨层级共享上下文
- vue-v-model - 双向绑定的本质
- vue-next-tick - DOM 更新后的等待时机
- vue-custom-directives - DOM 级复用行为的扩展点
- Vue Composables 模式 - 组合式函数封装模式
- vue3-dollar-event - 模板事件参数的特殊变量
- props 与 emit 定义 - 具体写法速查
工程与生态
- 路由 - 浏览器路由、SPA 与 hash/history 的基础原理
- vue-router - 路由系统与导航控制
- vue-router-guards-and-permission-control - 导航守卫、meta 与权限校验
- vue-router-module-design - 布局路由、模块拆分与 meta 组织
- pinia - 集中式状态管理
- pinia-store-design-patterns - store 拆分与共享状态边界
- vueuse - 组合式工具函数库
- vue3-performance-optimization - 性能优化与工程习惯
- vue3-virtual-dom - 渲染与更新机制
学习与面试
- vue-learning-roadmap - Vue 的推荐学习顺序
- vue-interview-high-frequency - Vue 高频面试主题索引
- vue3-ui-interaction - 状态、事件与通信构成的 UI 交互总览
对照理解
UI 与样式
编辑器与集成
实战问题
- static-init-pinia-error
- vue-global-dialog-not-responding
- vue-loop-rendering-error-experience
- router-key-duplicate-render-issue
相关地图
- frontend-basics-moc - 前端基础 MOC
- frontend-components-moc - 前端组件 MOC
- element-plus-moc - Element Plus MOC