Vue MOC

动态知识目录（Base）

Obsidian Base 是本地动态视图；网页端请浏览相关知识笔记。

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

系统路径见 Vue 学习路线 MOC。

阅读建议

这张地图只负责导航，不重复展开所有正文。阅读时优先先抓主线，再进入原子笔记。

从哪里开始

1. Vue 3
2. Vue 响应式系统
3. Vue2 与 Vue3 响应式系统对比
4. React 状态模型 vs Vue3 响应式模型
5. Vue Composition API
6. vue-router
7. Pinia

核心概念

• Vue 3 - Vue3 的整体定位与学习主线
• Vue 响应式系统 - ref、reactive、computed、watch 的核心关系
• React 状态模型 vs Vue3 响应式模型 - 对照理解 Vue 响应式和 React state snapshot
• Vue中的ref和reactive - 两种响应式状态容器的差异
• Vue 计算属性 - 派生状态与缓存
• 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 渲染与更新流程 - 状态变化到 DOM 更新的主线
• vue3-lifecycle - 生命周期时机
• vue-component-design-principles - 组件职责与复用边界
• Vue 组件通信 - 组件通信方式总览
• 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 虚拟 DOM - 渲染与更新机制

学习与面试

• vue-learning-roadmap - Vue 的推荐学习顺序
• vue-interview-high-frequency - Vue 高频面试主题索引
• vue3-ui-interaction - 状态、事件与通信构成的 UI 交互总览

对照理解

• React 状态模型 vs Vue3 响应式模型
• Vue2 与 Vue3 响应式系统对比

UI 与样式

• vue-scoped-css-principle
• element-plus
• shadcn-vue

编辑器与集成

• tiptap-vue3
• vue-print-next
• monaco-editor

实战问题

• static-init-pinia-error
• blogs/dailyuse-vue-shared-ui-state-issues
• vue-loop-rendering-error-experience
• Vue Router 重复挂载的排查

相关地图

• frontend-basics-moc - 前端基础 MOC
• frontend-components-moc - 前端组件 MOC
• element-plus-moc - Element Plus MOC

Related notes

• Vue3
• Vue组合式API
• Vue响应式系统
• Vue Router