前端面试题，涉及vue核心

下面这个表格汇总了核心知识点，方便你快速建立知识体系：

💡 深入理解响应式原理

这是面试的‌必考题‌，你需要能清晰阐述其演进和底层机制。

• ‌Vue2 基于 Object.defineProperty‌：通过劫持数据的 getter 和 setter 来实现响应式。它的局限是无法检测到‌对象属性的添加或删除‌，因此提供了 Vue.set 和 Vue.delete 这类 API 作为补救。

• ‌Vue3 基于 Proxy‌：提供了真正的“代理”，可以拦截对象的各种操作，包括属性的添加、删除等，从根源上解决了 Vue2 的局限性。

• ‌核心角色‌：需要理解 Observer（数据观测）、Dep（依赖管理）和 Watcher（观察者）三者如何协作完成‌依赖收集‌与‌派发更新‌。

‌面试高频陷阱题‌：解构响应式对象导致响应性丢失。

const user = reactive({ name: 'Alice' });let { name } = user; // 此时 `name` 是一个普通的字符串副本name = 'Bob'; // 页面不会更新！

正确做法‌是直接操作原对象 user.name = 'Bob'，或使用 toRefs 将响应式对象转换为普通对象，其中每个属性都是响应式的 ref。

🧩 掌握组件化核心机制

组件是 Vue 的基石，你需要透彻理解其运行的全过程。

生命周期‌：不仅要记住名称，更要理解每个钩子的‌触发时机‌和‌适用场景‌。例如，mounted 表示组件已挂载，可以访问 DOM；

而 updated 要小心使用，避免在内部更新状态导致无限循环。

组件通信‌：根据场景选择合适的通信方式。

父子通信‌：props / $emit 是最基础且常用的方式。

跨级/全局通信‌：provide / inject 适用于深层嵌套；Vuex/Pinia 用于复杂的全局状态管理。

⚙️ 理解编译与渲染流程

这部分能体现你对 Vue 底层架构的理解深度。

模板编译‌：Vue 的模板会被编译成‌渲染函数(render)‌。

渲染函数执行后返回的是‌虚拟DOM‌，而非真实的 DOM 节点。

Diff算法与Patch‌：当数据变化导致重新渲染时，

Vue 会将新旧虚拟DOM进行对比（Diff），然后高效地更新（Patch）真实DOM。

🚀 熟悉新特性与组合式API

Vue3 的 Composition API 是面试的绝对重点。

设计动机‌：解决 Options API 在逻辑复杂时，‌相同功能代码分散‌在 data、methods、computed 中的问题，

实现更好的‌逻辑关注点分离‌和‌逻辑复用‌。

核心函数‌：ref、reactive、computed、watch 等，你需要清楚它们的区别和使用场景。例如，reactive 用于对象，

ref 用于基本类型，并需要通过 .value 访问。