Vue的响应式原理：Vue如何使用Object.defineProperty或Proxy来追踪依赖，并在属性被访问和修改时通知变更。

理解响应式系统的概念

什么是响应式系统

 

在编程的上下文中，响应式系统是指该系统能够在数据变化时实时响应这些变化，自动更新相关的计算或者 UI。换句话说，当你修改了系统中的一个变量，这个系统会自动更新所有依赖于这个变量的值。

 

在 Vue.js 中，响应式系统是其最核心的特性之一。Vue.js 的响应式系统使得 Vue.js 可以在数据变化时，自动重新渲染相关的视图。

 

响应式系统的工作机制

 

Vue.js 的响应式系统主要由以下几部分组成：

 

• Observer：Observer 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）将数据对象的属性转换为 getter/setter，使 Vue.js 可以追踪数据的读取和修改。

• Dep：Dep 是一个可以存储多个 Watcher 的容器。当一个数据属性被访问时，Vue.js 会将当前的 Watcher 添加到这个属性的 Dep 中；当一个数据属性被修改时，Vue.js 会通知这个属性的 Dep，让 Dep 通知所有的 Watcher 更新视图。

• Watcher：Watcher 代表了 Vue.js 中的一个“依赖”，它知道如何更新视图。当它的依赖数据发生改变时，Watcher 会重新计算，如果需要的话，也会重新渲染视图。

 

在 Vue.js 中，当你访问一个数据属性时，Vue.js 会记录这个属性作为当前计算或渲染的依赖；当你修改一个数据属性时，Vue.js 会重新计算或渲染所有依赖于这个属性的计算属性或视图。这就实现了数据驱动视图的响应式更新。

Vue.js 的响应式实现

Vue 如何使用 Object.defineProperty 或 Proxy 来创建响应式对象

 

在 Vue 2 中，Vue 使用 Object.defineProperty 将数据对象的每个属性转换成 getter/setter，从而使 Vue 可以追踪数据的读取和修改。

Object.defineProperty(data, 'message', {
  get() {
    // 追踪依赖...
    return internalValue;
  },
  set(newVal) {
    // 通知变更...
    internalValue = newVal;
  }
});

 

在 Vue 3 中，Vue 使用 ES6 的 Proxy 来实现响应式系统，它可以直接拦截对象的基本操作，而不仅仅是属性的访问。