大厂面试：用通俗易懂的语言讲述 Vue 响应式原理，一文让你醍醐灌顶

2023-11-13 06:12:33

数据劫持与 Vue 响应式原理

Vue 响应式原理的核心是数据劫持。数据劫持是指通过某种手段，将 JavaScript 对象或数组的属性和方法拦截下来，并在访问和修改它们时进行额外的处理。Vue 在初始化组件时，会使用 Object.defineProperty() 方法劫持数据对象的属性，并为每个属性添加 setter 和 getter 方法。当组件的数据发生变化时，会触发 setter 方法，setter 方法会通知 Vue 依赖收集系统，依赖收集系统会将组件的 Watcher 实例添加到属性的依赖列表中。当组件的属性值发生变化时，Vue 会通过发布订阅模式通知所有依赖该属性的 Watcher 实例，Watcher 实例会更新组件的视图。

2. Vue 响应式系统的核心概念

数据劫持： 通过 Object.defineProperty() 方法将 JavaScript 对象或数组的属性和方法拦截下来，并在访问和修改它们时进行额外的处理。
Setter 和 Getter 方法： Object.defineProperty() 方法允许我们在访问和修改对象的属性时执行额外的操作。
Vue 依赖收集系统： 负责收集组件的 Watcher 实例，以便在数据发生变化时通知它们。
Vue 发布订阅模式： Vue 使用发布订阅模式来通知组件数据的变化。当组件的数据发生变化时，Vue 会发布一个事件，所有订阅该事件的 Watcher 实例都会收到通知。
Watcher 实例： 负责监听组件数据的变化并更新视图。
虚拟 DOM： Vue 使用虚拟 DOM 来更新视图。虚拟 DOM 是一个内存中的轻量级 DOM 树，它代表了组件的视图结构。当组件的数据发生变化时，Vue 会重新生成虚拟 DOM 树，然后将虚拟 DOM 树与真实的 DOM 树进行比较，只更新那些发生变化的部分。