响应式编程-数据劫持

响应式编程的核心思想是观察者模式，被观察的对象我们可以称之为数据源，所以，数据是响应式编程所关注的核心。

假设有一个数据对象,有一个字段age值为18：

let obj = {
    age:18
}

然后有一个函数，在这个函数打印age字段：

function fn(){
  console.log(obj.age);
}

fn();//18

现在我们想当我们修改age字段值时，fn函数能够自动执行。

那要怎么实现呢？

有这样一种思路是：当age字段被读取的时候，我们记住是什么函数读取了它；在给age字段设值的时候，我们拿出记录的函数并调用它。这样我们每次修改age的时候就会自动执行相关函数了。

下面我们按这种思路具体实现一下：

首先，这里面涉及到三个角色：1、数据对象  2、数据字段  3、副作用函数(在函数内部修改了函数外部的数据)，它们的关系如下：

对象
   |__字段1
   |  |__副作用函数1
   |
   |__字段2
      |__副作用函数1
      |__副作用函数2

然后，我们需要对obj数据对象字段的读取和写入操作进行劫持以达到我们记录和调用副作用函数的目的，这里我们通过js中的Proxy来代理obj对象的get和set属性。

我们先来看一下简单版代码，只有一个副作用函数，一个数据对象，一个字段：

// 数据对象
const data = { 
    age:18
};

const obj = new Proxy(data, {
    // 拦截读取操作
    get(target, key) {
        return target[key]
    },
    // 拦截设置操作
    set(target, key, newVal) {
        target[key] = newVal
        fn();
    }
})

// 副作用函数
function fn(){
   console.log(obj.age);
}

fn();

setTimeout(()=>{
    obj.age = 20;
},2000)

最后来一个支持多对象，多字段，多副作用函数的vue源码简化版本：

// 当前副作用函数
let activeEffect;
// 存储副作用函数的桶 
const bucket = new WeakMap()
const data = { 
    text: 'hello world' 
};

const obj = new Proxy(data, {
    // 拦截读取操作
    get(target, key) {
        // 将副作用函数 activeEffect 添加到存储副作用函数的桶中
        track(target, key)
        // 返回属性值
        return target[key]
    },
    // 拦截设置操作
    set(target, key, newVal) {
        // 设置属性值
        target[key] = newVal
        // 把副作用函数从桶里取出并执行
        trigger(target, key)
    }
})

// 在 get 拦截函数内调用 track 函数追踪变化
function track(target, key) {
    // 没有 activeEffect，直接 return
    if (!activeEffect) return
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
}

// 在 set 拦截函数内调用 trigger 函数触发变化
function trigger(target, key) {
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn())
}

// 注册并执行副作用函数
function effect(fn){
    activeEffect = fn;
    fn && fn();
}

// 注册并执行一个副作用函数
effect(() => {
    console.log(obj.text)
})

effect(() => {
    console.log(obj.text+'第二个副作用函数')
})

// 执行
setTimeout(() => {
    obj.text = 'hello vue boy'
}, 2000)