Vue 3 核心知识点全览

以下是 Vue 3 核心知识点全览，涵盖基础到进阶的完整技术体系：

---

一、核心概念与响应式系统

1. 响应式原理

• Proxy 代理：替代 Vue 2 的 Object.defineProperty

  const reactiveObj = new Proxy(target, {get(target, key) { /* 依赖收集 */ },set(target, key, value) { /* 触发更新 */ }
  });
  

• Reflect API：配合 Proxy 实现元编程
• 依赖追踪：基于 effect 函数的发布订阅模式

2. 响应式 API

• ref：处理基础类型，通过 .value 访问

  const count = ref(0);
  count.value++;
  

• reactive：处理对象类型，深层代理

  const state = reactive({ user: { name: 'Alice' } });
  

• toRefs：解构响应式对象保持响应性

  const { user } = toRefs(state);
  

3. 计算与侦听

• computed：惰性求值

  const double = computed(() => count.value * 2);
  

• watch：精确控制侦听源

  watch([count, state], ([newCount, newState]) => {});
  

• watchEffect：自动依赖收集

  watchEffect(() => console.log(count.value));
  

---

二、组合式 API 深度解析

1. 生命周期钩子

• 新版命名（onMounted 替代 mounted）

  onMounted(() => { /* DOM 就绪 */ });
  

• 顺序自由：可在 setup 中任意位置调用

2. 自定义 Hook

• 逻辑复用模式

  // useMouse.js
  export function useMouse() {const x = ref(0);onMounted(() => window.addEventListener('mousemove', update));return { x };
  }
  

3. 依赖注入

• provide/inject：跨层级数据传递

  provide('theme', 'dark');
  const theme = inject('theme', 'light'); // 默认值
  

---

三、模板与指令系统

1. 模板语法增强

• v-model 多参数

  <Comp v-model:title="pageTitle" />
  

• <Teleport>：传送 DOM 结构

  <teleport to="#modal"><div class="modal">...</div>
  </teleport>
  

2. 指令开发

• 自定义指令生命周期

  const myDirective = {beforeMount(el, binding) {},updated(el, binding) {}
  };
  

3. 动态组件与异步

• <component :is>：动态组件

  <component :is="currentComponent" />
  

• <Suspense>：异步组件加载状态

  <Suspense><template #default><AsyncComp /></template><template #fallback>Loading...</template>
  </Suspense>
  

---

四、状态管理与路由

1. Pinia 状态库

• 核心概念：

  export const useStore = defineStore('main', {state: () => ({ count: 0 }),actions: { increment() { this.count++ } }
  });
  

• 组合式 Store

  export const useUserStore = defineStore('user', () => {const user = ref(null);const fetchUser = async () => { /* API调用 */ };return { user, fetchUser };
  });
  

2. Vue Router 4

• 路由定义

  const routes = [{ path: '/', component: Home, meta: { requiresAuth: true } }
  ];
  

• 组合式导航

  const router = useRouter();
  router.push({ name: 'profile' });
  

---

五、高级特性与性能优化

1. 渲染机制

• 虚拟 DOM 优化：静态节点提升、补丁标记
• 编译时优化：Block Tree 减少 Diff 范围

2. 响应式进阶

• shallowRef：浅层响应
• markRaw：标记非响应对象
• customRef：自定义响应逻辑

  function useDebouncedRef(value, delay) {return customRef((track, trigger) => ({get() { track(); return value },set(newVal) {clearTimeout(timeout);timeout = setTimeout(() => {value = newVal;trigger();}, delay);}}));
  }
  

3. 性能优化策略

• v-memo：条件缓存

  <div v-memo="[dependency]">...</div>
  

• 组件懒加载

  const LazyComp = defineAsyncComponent(() => import('./Comp.vue'));
  

---

六、TypeScript 集成

1. 类型推导

• Props 类型声明

  defineProps<{title: string;count?: number;
  }>();
  

• 事件类型

  const emit = defineEmits<{(e: 'update', payload: string): void;
  }>();
  

2. 类型工具

• ExtractPropTypes：提取 props 类型
• ComponentPublicInstance：组件实例类型

---

七、工程化与生态

1. Vite 集成

• 配置示例

  // vite.config.js
  export default defineConfig({plugins: [vue()],resolve: { alias: { '@': path.resolve(__dirname, 'src') } }
  });
  

2. 测试工具链

• Vitest：单元测试

  test('increments count', async () => {const wrapper = mount(Counter);await wrapper.find('button').trigger('click');expect(wrapper.text()).toContain('1');
  });
  

3. 服务端渲染（SSR）

• Nuxt 3：全栈框架
• createSSRApp：手动 SSR 实现

---

八、进阶模式与原理

1. 编译器原理

• 模板编译阶段：
  1. 解析 → AST
  2. 转换 → JavaScript AST
  3. 生成 → 渲染函数代码

2. 自定义渲染器

• createRenderer：跨平台渲染

  const { createApp } = createRenderer({createElement: (tag) => { /* 自定义创建逻辑 */ }
  });
  

---

知识图谱构建建议

1. 分阶段学习路径：

   • 基础：响应式 + 模板语法
   • 进阶：组合式 API + 状态管理
   • 高阶：原理剖析 + 性能优化

2. 实践项目推荐：

   • 低代码平台搭建
   • 微前端架构实现
   • 全栈 SSR 应用开发

通过系统掌握上述知识体系，可胜任从基础开发到架构设计的全链路 Vue 3 开发工作。建议通过 官方文档 + 源码阅读 + 项目实践 三维度深化理解。