Vue原理面试题及详细答案.docxVIP

Vue原理面试题及详细答案

一、基础原理（高频基础题，必背）

1.请说说Vue的响应式原理是什么？（最基础，几乎必问）

答案：Vue的响应式核心是“数据劫持+依赖收集”，核心目标是让数据变化时，依赖该数据的视图自动更新，无需手动操作DOM。

具体实现分3步（以Vue2为例，贴合实际面试表述，不堆砌源码）：

1.数据劫持：Vue初始化时，会通过Object.defineProperty()方法，对data里的每一个属性进行劫持，重写它们的getter和setter方法。

2.依赖收集：当组件渲染时，会读取data中的属性，此时会触发getter方法，把当前的渲染Watcher（监听视图更新的实例）收集到该属性的依赖列表中（相当于“记住”哪个视图用了这个数据）。

3.触发更新：当我们修改data中的属性时，会触发setter方法，此时会遍历该属性的依赖列表，通知所有相关的Watcher，让它们触发视图重新渲染，实现“数据变，视图变”。

补充：Vue3中用Proxy替代了Object.defineProperty()，解决了后者无法监听数组下标变化、对象新增/删除属性的问题，Proxy能直接监听整个对象，效率更高，且支持数组、对象的所有变更场景。

2.Vue2和Vue3的响应式原理有什么区别？（基础进阶，高频）

答案：核心区别在于“数据劫持的方式不同”，进而导致功能、效