Vue响应式原理Observer、Dep、Watcher理解

开篇

最近在学习vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果????

object.defineproperty

相信很多同学或多或少都了解vue的响应式原理是通过object.defineproperty实现的。被object.defineproperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子????

function definereactive (obj, key, val) {
  object.defineproperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.log('我被读了，我要不要做点什么好?');
      return val;
    },
    set: newval => {
      if (val === newval) {
        return;
      }
      val = newval;
      console.log("数据被改变了，我要把新的值渲染到页面上去!");
    }
  })
}

let data = {
  text: 'hello world',
};

// 对data上的text属性进行绑定
definereactive(data, 'text', data.text);

console.log(data.text); // 控制台输出 <我被读了，我要不要做点什么好?>
data.text = 'hello vue'; // 控制台输出 <hello vue && 数据被改变了，我要把新的值渲染到页面上去!>

observer 「响应式」

vue中用observer类来管理上述响应式化object.defineproperty的过程。我们可以用如下代码来描述，将this.data也就是我们在vue代码中定义的data属性全部进行「响应式」绑定。

class observer {
  constructor() {
    // 响应式绑定数据通过方法
   observe(this.data);
  }
}

export function observe (data) {
  const keys = object.keys(data);
  for (let i = 0; i < keys.length; i++) {
    // 将data中我们定义的每个属性进行响应式绑定
    definereactive(obj, keys[i]);
  }
}

dep 「依赖管理」

什么是依赖？

相信没有看过源码或者刚接触dep这个词的同学都会比较懵。那dep究竟是用来做什么的呢？ 我们通过definereactive方法将data中的数据进行响应式后，虽然可以监听到数据的变化了，那我们怎么处理通知视图就更新呢？

dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例，我们发现，虽然data中有text和message属性，但是只有message被渲染到页面上，至于text无论怎么变化都影响不到视图的展示，因此我们仅仅对message进行收集即可，可以避免一些无用的工作。

那这个时候message的dep就收集到了一个依赖，这个依赖就是用来管理data中message变化的。

<div>
  <p>{{message}}</p>
</div>

data: {
  text: 'hello world',
  message: 'hello vue',
}

当使用watch属性时，也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化，message变化时我们就要通知到watch这个钩子，让它去执行回调函数。

这个时候message的dep就收集到了两个依赖，第二个依赖就是用来管理watch中message变化的。

watch: {
  message: function (val, oldval) {
    console.log('new: %s, old: %s', val, oldval)
  },
}    

当开发者自定义computed计算属性时，如下messaget属性，是依赖message的变化的。因此message变化时我们也要通知到computed，让它去执行回调函数。 这个时候message的dep就收集到了三个依赖，这个依赖就是用来管理computed中message变化的。

computed: {
  messaget() {
    return this.message + '!';
  }
}

图示如下：一个属性可能有多个依赖，每个响应式数据都有一个dep来管理它的依赖。

如何收集依赖

我们如何知道data中的某个属性被使用了，答案就是object.defineproperty，因为读取某个属性就会触发get方法。可以将代码进行如下改造：

function definereactive (obj, key, val) {
  let dep; // 依赖

  object.defineproperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.log('我被读了，我要不要做点什么好?');
      // 被读取了，将这个依赖收集起来
      dep.depend(); // 本次新增
      return val;
    },
    set: newval => {
      if (val === newval) {
        return;
      }
      val = newval;
      // 被改变了，通知依赖去更新
      dep.notify(); // 本次新增
      console.log("数据被改变了，我要把新的值渲染到页面上去!");
    }
  })
}

什么是依赖

那所谓的依赖究竟是什么呢？上面的图中已经暴露了答案，就是watcher。

watcher 「中介」

watcher就是类似中介的角色，比如message就有三个中介，当message变化，就通知这三个中介，他们就去执行各自需要做的变化。

watcher能够控制自己属于哪个，是data中的属性的还是watch，或者是computed，watcher自己有统一的更新入口，只要你通知它，就会执行对应的更新方法。

因此我们可以推测出，watcher必须要有的2个方法。一个就是通知变化，另一个就是被收集起来到dep中去。

class watcher {
  adddep() {
    // 我这个watcher要被塞到dep里去了~~
  },
  update() {
    // dep通知我更新呢~~
  }, 
}

总结

回顾一下，vue响应式原理的核心就是observer、dep、watcher。

observer中进行响应式的绑定，在数据被读的时候，触发get方法，执行dep来收集依赖，也就是收集watcher。

在数据被改的时候，触发set方法，通过对应的所有依赖(watcher)，去执行更新。比如watch和computed就执行开发者自定义的回调方法。

本篇文章属于入门篇，能够先简单的理解observer、dep、watcher三者的作用和关系。后面会逐渐详细和深入，循序渐进的理解和学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。