VUE源码解读：Object的变化侦测

2023-10-11 05:00:32

引言

在构建交互式Web应用时，MVVM架构发挥着至关重要的作用，它巧妙地将数据模型与视图层分离，使两者之间能够松散耦合。Vue.js作为一款流行的MVVM框架，在实现数据绑定机制时，通过一套巧妙的Change Detection（变化侦测）机制，时刻监测数据的变化，并适时地触发视图更新。

Object的变化侦测原理

Vue.js对Object的变化侦测主要依赖于Object.defineProperty()方法。当我们通过Vue.set()或直接赋值的方式修改一个响应式Object的属性时，Vue.js内部会触发该方法，为新属性添加一个Getter和一个Setter。其中，Getter负责收集依赖关系，而Setter则负责在属性值发生变化时通知依赖项更新。

Getter的依赖收集

当我们访问一个响应式Object的属性时，Vue.js会触发其Getter函数。Getter会记录当前正在执行的依赖项，这些依赖项可能是Watcher（观察者）或计算属性。通过收集依赖关系，Vue.js可以建立一个属性与依赖项之间的映射关系。

Setter的通知更新

当响应式Object的属性值发生变化时，Vue.js会触发其Setter函数。Setter会遍历收集到的依赖项列表，并逐个调用它们的update()方法，通知这些依赖项数据已发生改变，需要重新计算或更新视图。

Vue源码解析

在Vue.js源码中，Object的变化侦测逻辑主要集中在dep.js文件中。dep.js负责管理响应式Object的依赖收集和通知更新。

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach((sub) => sub.update());
  }
}

优势与局限

Vue.js对Object的变化侦测机制具有以下优势：