2024年 Vue经典面试题 -- 必问知识点 --（包含答案）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

深入理解：

监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式

订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

Vue 双向数据绑定原理

数据的双向绑定是通过数据劫持结合发布订阅实现的。利用Object.defineproperty()方法将各个属性的getter和setter方法改写。当数据发生改变的时候，通知订阅者，并触发对应的回调函数，重新渲染数据。主要是实现以下几点：

(1) 数据观察者Observer，观察每个属性，当发生变化的时候，得到最新值并通知订阅者。

(2) 指令编译器Compile，对每个元素的节点进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

(3) 监听者Watcher，是数据观察者Observer和编译器Compile的桥梁。能订阅每个数据属性变化，当收到变化通知后，执行指令绑定的相应回调，从而更新视图。

vue会遍历data中的所有属性，利用Object.definedProperty这个方法给data中每一个属性增加监听者，即给每一个属性增加get方法和set方法，当数据发生变化时，会触发set方法，当获取数据时，会触发get方法；

数据劫持

Object.defineProperty()

控制一个对象属性的一些特有操作，比如读写权、是否可以枚举

通过get和set方法对data里的每个属性进行劫持

发布者-订阅者模式

监听器Observer 用来劫持并监听所有属性，如果有变动的，就通知订阅者。

订阅者Watcher 可以收到属性的变化通知并执行相应的函数，从而更新视图

解析器Compile 可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

订阅器Dep 订阅者（watcher）是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者

每一个对象属性中存储了一个 Dep，Dep 中收集了该对象对应的 watcher，当该属性值发生变化，会触发的 Dep 中保存的 watcher 进行遍历（notify），进而更新视图。

3.你知道Vue3.x响应式数据原理吗？

---

• Vue3.x改用Proxy替代Object.defineProperty。

• 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

• Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？

• 判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

• 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断ke