深入浅出Vue响应式数据实现原理解析：defineReactive方法剖析

2023-10-28 18:51:55

引言

在上一篇文章的结尾，我提到将着重讲解defineReactive方法。这个方法是Vue实现响应式数据原理的核心。虽然很多前端大咖都知道它的作用，但相信还是有一些朋友不熟悉。我希望我的文章不只是传达Vue内部实现的信息，更是帮助大家真正理解这些机制。

defineReactive方法概述

defineReactive方法是Vue响应式系统的重要组成部分，它负责将普通的数据对象转换为响应式对象。在Vue中，响应式对象是指当其属性发生变化时，视图也会随之更新的对象。

defineReactive方法的工作原理是利用JavaScript的Object.defineProperty()方法，为对象的每个属性添加一个getter和setter。getter和setter是特殊的函数，会在属性被访问或修改时被调用。

defineReactive方法实现原理

下面我们来看一下defineReactive方法的实现原理。

function defineReactive(obj, key, val) {
  // 如果val是对象，则递归处理
  if (typeof val === 'object') {
    observe(val);
  }

  // 创建一个Dep实例，用于收集依赖该属性的watcher
  const dep = new Dep();

  // 利用Object.defineProperty()方法为属性添加getter和setter
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      dep.depend();

      // 返回属性值
      return val;
    },
    set(newVal) {
      // 如果新值与旧值相同，则不触发更新
      if (newVal === val) {
        return;
      }

      // 更新属性值
      val = newVal;

      // 通知依赖该属性的watcher，属性值已更新
      dep.notify();
    },
  });
}

defineReactive方法在数据劫持和数据绑定中的作用

defineReactive方法在Vue响应式数据实现中发挥着至关重要的作用，它主要用于以下两个方面：

数据劫持

数据劫持是指将普通的数据对象转换为响应式对象的过程。defineReactive方法通过利用JavaScript的Object.defineProperty()方法，为对象的每个属性添加getter和setter，从而实现数据劫持。

数据绑定

数据绑定是指将数据对象与视图进行关联，当数据对象发生变化时，视图也会随之更新。defineReactive方法通过为属性添加getter和setter，当属性被访问或修改时，会触发getter或setter函数。getter函数负责收集依赖该属性的watcher，setter函数负责通知依赖该属性的watcher，属性值已更新。