截获对象的操作

我们先来看一个需求：有一个对象，我们希望截获这个对象中的属性被设置或获取的过程。

我们可以通过前面所学的 Object.defineProperty 的存取属性描述符来对属性的操作进行截获。

const obj = {
  name: 'zs',
  age: 18
}
Object.keys(obj).forEach(key => {
  // 获取属性值
  let val = obj[key]
  // 截获属性的 set、get 操作
  Object.defineProperty(obj, key, {
    set: function(newVal) {
      console.log(key + '属性 set 操作被截获');
      val = newVal
    },
    get: function() {
      console.log(key + '属性 get 操作被截获');
      return val
    }
  })
})
console.log(obj.name);
obj.age = 22
console.log(obj.age);
// name属性 get 操作被截获
// zs
// age属性 set 操作被截获
// age属性 get 操作被截获
// 22

但是这样做有什么缺点呢？

• 首先，Object.defineProperty设计的初衷，不是为了去捕获截止一个对象中所有的属性的。我们在定义某些属性的时候，初衷其实是定义成数据属性描述符，但是后面我们强行将它变成了存取属性描述符。
• 其次，如果我们想捕获更加丰富的操作，比如新增属性、删除属性，那么 Object.defineProperty 是无能为力的。

这个截获的操作其实就是代理模式，所以 ES6 直接新增了 Proxy类

Proxy 代理

在ES6中，新增了一个 Proxy 代理类，可以截获一些对象操作，对对象操作进行一些增强处理，并且也可以避免对对象的直接操作。
new Proxy(target, handler)

• target：代理的目标对象

• handler：一个处理对象，里面包含了 13个 捕获器方法

  Proxy的set和get捕获器

  我们想要侦听某些具体的操作，那么就可以在 handler 中添加对应的捕捉器（Trap）：最常见的是 set、get
  set 和 get 分别对应的是函数类型；
  set 函数有四个参数：

• target：目标对象（代理的对象）；

• property：将被设置的属性key；
• value：新属性值；

receiver：调用的代理对象；

• get函数有三个参数：
• target：目标对象（代理的对象）；
• property：被获取的属性key；
• receiver：调用的代理对象； ```javascript const obj = { name: ‘why’, age: 18 }

const objProxy = new Proxy(obj, { // 获取值时的捕获器 get: function (target, key) { // 捕获后的处理 console.log(捕获到对象的${key}属性被访问了, target) // 执行原本的 get 操作 return target[key] },

// 设置值时的捕获器 set: function (target, key, newValue) { console.log(捕获到对象的${key}属性被设置值, target) target[key] = newValue },

// 监听in的捕获器 has: function (target, key) { console.log(捕获到对象的${key}属性in操作, target) return key in target },

// 监听delete的捕获器 deleteProperty: function (target, key) { console.log(捕获到对象的${key}属性in操作, target) delete target[key] } })

// get 操作 console.log(objProxy.name)

// set 操作 objProxy.age = 22

// in操作符 console.log(‘name’ in objProxy)

// delete操作 delete objProxy.name

<a name="J19oZ"></a>
## Proxy所有捕获器
![image.png](https://cdn.nlark.com/yuque/0/2022/png/22919157/1649864003579-7c25529a-807c-4277-b40b-5182f321c195.png#clientId=udaec0891-7161-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=454&id=u8611d516&margin=%5Bobject%20Object%5D&name=image.png&originHeight=568&originWidth=1053&originalType=binary&ratio=1&rotation=0&showTitle=false&size=163881&status=done&style=none&taskId=u0918db39-b185-4551-bead-f8dc4d8186b&title=&width=842.4)
<a name="aM7jv"></a>
## Proxy 的 construct 和 apply 捕获器
其他的捕获器都是捕获普通对象操作的，constructor 和 apply 是函数才有的操作，所以这两个也是捕获函数对象的捕获器。
```javascript
function foo() { }
const fooProxy = new Proxy(foo, {
  apply: function(target, thisArg, argArray) { // thisArg:this argArray:参数数组
    // 捕获后的额外操作
    console.log("对foo函数进行了apply调用")
    // 原本的 apply 操作
    return target.apply(thisArg, argArray)
  },
  construct: function(target, argArray, newTarget) {
    console.log("对foo函数进行了new调用")
    return new target(...argArray)
  }
})
fooProxy.apply({}, ["abc", "cba"]) // 对foo函数进行了apply调用
new fooProxy("abc", "cba") // 对foo函数进行了new调用

Reflect 反射

Reflect 是一个内置的对象，它主要提供了很多操作 JavaScript 对象的方法，有点像 Object 中操作对象的方法；Reflect不是一个函数对象，因此它是不可构造的。

操作对象的方法已经在 Object 中有了，为什么还需要 Reflect 来重复一次？
这是因为在早期的ECMA规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范，所以将这些API放到了Object上面；
但是Object作为一个构造函数，这些操作实际上放到它身上并不合适；
另外还包含一些类似于 in、delete操作符，让JS看起来是会有一些奇怪的；
所以在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上。
换句话说 Reflect 就是来替代 Object 来对对象进行操作的。

Reflect 的常见方法

Reflect 对象的常见方法和 proxy handlers 是一一对应的。

Reflect 的用法

一般是和 Proxy 连用。Proxy 之前的实现存在一些问题，代理的目的之一就是避免对对象的直接操作，但是在捕获器方法中类似target[key]，还是对对象进行了直接操作。

const obj = {
  name: 'zs',
  age: 18
}
const objProxy = new Proxy(obj, {
  get(target, key) {
    // return target[key] // 相当于 obj.name 直接对对象进行操作
    return Reflect.get(target, key) // 反射调用相当于又包裹了一层，避免了直接调用
  },
  set(target, key, newVal) {
    console.log('set 被执行');
    // 反射的 set 和普通的 set 不一样，会返回一个 Boolean 值，判断是否 set 成功
    Reflect.set(target, newVal)
  },
  has(target, key) {
    console.log(`存在${key}属性`);
    Reflect.has(target, key)
  },
  deleteProperty(target, key) {
    console.log(`${key}属性被删除`);
    Reflect.deleteProperty(target, key)
  }
})
console.log(objProxy.name); // zs
objProxy.age = 22 // set 被执行
console.log(objProxy.age); // 18
'name' in objProxy // 存在name属性
delete objProxy.name  // name属性被删除

Receiver 参数的作用

之前的代理反射的方式还有一个问题：对于私密属性中 setter、getter 里面访问其他属性的操作，会绕开代理对象的捕获。因为其中的 this 指向对象本身而不是代理对象。
Receiver 参数就是代理对象本身，将它传入 Reflect 的 get、set 方法，就可以修改 setter、getter this 的指向，使它指向代理对象。

const obj = {
  name: 'zs',
  // 隐藏 _age 属性
  _age: 18,
  get age() {
    console.log(this); 
    return this._age 
  },
  // 普通方法
  sing: function() {
    console.log(this); 
    console.log(this.name + ' singing'); // 方法中调用了其他属性
  }
}
const objProxy = new Proxy(obj, {
  get(target, key) {
    console.log('get-------');
    return Reflect.get(target, key) 
  }
})
// 访问私密属性，调用 get，get 中访问对象属性不会被代理捕获
console.log(objProxy.age);
// get------- 
// Object {name: ...} 因为对象 get 操作中，this 指向obj，直接对name属性调用
// 18
// 普通方法属性
objProxy.sing()
// get------- 反射方法执行，访问 sing 属性被代理捕获
// Proxy {}
// get------- 执行 this.name 时，this 指向反射对象，访问 name 属性再被代理捕获一次
// zs singing

const obj = {
  name: 'zs',
  // 隐藏 _age 属性
  _age: 18,
  get age() {
    console.log(this); 
    return this._age 
  },
  // 普通方法
  sing: function() {
    console.log(this); 
    console.log(this.name + ' singing'); 
  }
}
const objProxy = new Proxy(obj, {
  get(target, key, recevicer) { // 添加 recevicer 属性
    console.log('get-------');
    return Reflect.get(target, key, recevicer) // 添加 recevicer 属性
  }
})
console.log(objProxy.age);
// get-------
// Proxy {}
// get-------
// 18
objProxy.sing()
// get-------
// Proxy {}
// get-------
// zs singing

Reflect 的 construct 方法

这个方法可以夺舍其他对象，拥有自身构造方法构造出来的灵魂，类型却是其他对象。

function Student(name, age) {
  this.name = name
  this.age = age
}
function Teacher() {
}
// 一般情况下的对象
const stu = new Student("why", 18)
console.log(stu) // Student { name: 'why', age: 18 }
console.log(stu.__proto__ === Student.prototype) // true
// 夺舍 Teacher，执行Student函数中的内容, 但是创建出来对象是Teacher对象
const teacher = Reflect.construct(Student, ["why", 18], Teacher)
console.log(teacher) // Teacher { name: 'why', age: 18 }
console.log(teacher.__proto__ === Teacher.prototype) // true

响应式原理

什么是响应式？

当变量或者对象变化时，使用了该变量、对象的代码或者一些相关的代码(也称为依赖)，会自动使用最新的值重新执行一次，这就是响应式。
实际情况，一般针对对象的变化进行响应式处理。

const obj = {
  name: 'zs',
  age: 18
}
// name 变化后，需要重新执行的代码
console.log(obj.name)
console.log(`与 name 属性相关的其他代码`);
// name 变化
obj.name = `ls`

响应式函数设计

首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中。那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数。

const obj = {
  name: 'zs',
  age: 18
}
// 以函数包裹
function foo() {
  // name 变化后，需要重新执行的代码
  console.log(obj.name)
  console.log(`与 name 属性相关的其他代码`)
}
// name 变化
obj.name = `ls`
// 响应式执行
foo()

现在存在一个问题，系统中还有很多与 name 属性无关的函数，它们不需要响应式。该怎么区分它们，怎么实现让 name 值变化，只会执行 foo 函数，而不执行其他普通函数？
答案就是再包裹一层响应式函数。并且我们可以维护一个数组，数组来保存这些要响应式执行的函数，因为针对 name 变化的代码未必能全包裹在一个函数中。

const obj = {
  name: 'zs',
  age: 18
}
// 以函数包裹
function fName1() {
  // name 变化后，需要重新执行的代码
  console.log(obj.name)
  console.log(`与 name 属性相关的其他代码1`)
}
function fName2() {
  console.log(`与 name 属性相关的其他代码2`)
}
// 不需要响应式的普通函数
function bar() {
  console.log(`阿巴阿巴阿巴，不需要响应式的代码`)
}
// 响应式函数
const arrName = []
function watchFn(fn) {
  arrName.push(fn)
}
watchFn(fName1)
watchFn(fName2)
// name 变化
obj.name = `ls`
// 响应式执行：遍历数组元素执行要响应式执行的函数
arrName.forEach(item => {
  item()
})

响应式依赖的收集

目前我们收集的依赖是放到一个数组中来保存的，但是这里会存在数据管理的问题：如果有多个对象怎么办？对象中又有多个属性，为了保存它们的依赖，我们就得全局创建多个数组。这样太烦了。

我们可以设计一个类，这个类的实例化对象都拥有一个属于自己的数组，然后也有自己的实例方法可以将依赖的汇总函数放入数组中。
watchFn 函数中就可以使用这个实例方法，而不用多个对象和属性下，一个一个去创建数组，复用了代码。（别忘了类也是为复用代码而生）
其实现在 watchFn 函数有总多此一举的感觉，完全可以用 依赖对象直接调用 addDepend。不用再被 watchFn 包裹一层。

class Depend {
  constructor() {
    this.reactiveFns = [] // 每个实例化对象都维护了一个数组
  }
  // 将依赖放入数组中
  addDepend(fn) {
    this.reactiveFns.push(fn)
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}
const obj = {
  name: 'zs',
  age: 18
}
// 以函数包裹
function fName1() {
  // name 变化后，需要重新执行的代码
  console.log(obj.name)
  console.log(`与 name 属性相关的其他代码1`)
}
function fName2() {
  console.log(`与 name 属性相关的其他代码2`)
}
// age 属性的依赖
function fAge() {
  console.log(`依赖 age 属性的代码`);
}
// 不需要响应式的普通函数
function bar() {
  console.log(`阿巴阿巴阿巴，不需要响应式的代码`)
}
// 响应式函数
function watchFn(depend, fn) {
  depend.addDepend(fn)
}
// name age 变化
obj.name = `ls`
obj.age = 22
// 现在要准备好哪个对象或属性改变后要执行的代码，只需要实例化 Depend 类就行
// 给 obj 对象的 name 属性添加响应式操作
const objNameDepend = new Depend()
// 收集 name 属性的依赖
watchFn(objNameDepend, fName1)
watchFn(objNameDepend, fName2)
// 执行（唤醒）name 属性的依赖
objNameDepend.notify()
// 给 obj 对象的 age 属性添加响应式操作
const objAgeDepend = new Depend()
// 收集 name 属性的依赖
watchFn(objAgeDepend, fAge)
// 执行（唤醒）name 属性的依赖
objAgeDepend.notify()

依赖收集后对象的管理

现在我们已经通过一个依赖类可以收集好不同对象各自属性的依赖了。但又出现了一个问题，一个实例化对象代表一个属性的依赖，这么多对象这么多属性，势必造成大量的实例化对象。我们该怎么管理这些实例化对象呢？总不能全都堆在全局里吧。

我们需要一个容器来保存这些 depend 对象，Map 就很合适。map 的结构适合这种零散的数据，读取也快。
进一步，我们还可以用多个 Map 将这些对象组织起来建立一个树形结构，按对象和属于这个对象的属性建立联系，方便了后续响应式执行的时候可以精准找到要执行的依赖对象。
其中对象这一层级，可以选择 WeakMap，因为弱引用可以很快的回收对象。属性层级可以就使用 Map。（具体为什么还得再分析）

// 收集依赖的类
class Depend {
  constructor() {
    this.reactiveFns = [] // 每个实例化对象都维护了一个数组
  }
  // 将依赖放入数组中
  addDepend(fn) {
    this.reactiveFns.push(fn)
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}
const obj = {
  name: 'zs',
  age: 18
}
const info = {
  name: 'w5',
  gender: 'man'
}
// obj 对象属性依赖
function objName1() {
  // name 变化后，需要重新执行的代码
  console.log(obj.name)
  console.log(`与 name 属性相关的其他代码1`)
}
function objName2() {
  console.log(obj.name + 111)
  console.log(`与 name 属性相关的其他代码2`)
}
function objAge() {
  console.log(obj.age)
  console.log(`依赖 age 属性的代码`)
}
// info 对象的属性依赖
function infoName() {
  console.log('info 对象，name 属性相关的代码')
}
function infoGender() {
  console.log('info 对象，gender 属性相关的代码')
}
// 不需要响应式的普通函数
function bar() {
  console.log(`阿巴阿巴阿巴，不需要响应式的代码`)
}
// 响应式函数
function watchFn(depend, fn) {
  depend.addDepend(fn)
}
// 收集依赖
const objNameDep = new Depend()
watchFn(objNameDep, objName1)
watchFn(objNameDep, objName2)
const objAgeDep = new Depend()
watchFn(objAgeDep, objAge)
const infoNameDep = new Depend()
watchFn(infoNameDep, infoName)
const infoGenderDep = new Depend()
infoGenderDep.addDepend(infoGender)
watchFn(infoGenderDep, infoGender)
// 收集依赖的树形结构
const objMap = new Map()
objMap.set('objNameDep', objNameDep)
objMap.set('objAgeDep', objAgeDep)
const infoMap = new Map()
infoMap.set('infoNameDep', infoNameDep)
infoMap.set('infoGenderDep', infoGenderDep)
const weakMap = new WeakMap()
weakMap.set(obj, objMap)
weakMap.set(info, infoMap)
// obj.name 发生变化
obj.name = `ls`
// info.genter 发生变化
info.gender = 'woman'
// 响应式操作，
// 1. 获取收集的依赖
const objNameDepend = weakMap.get(obj).get('objNameDep')
// 2. 执行响应式操作
objNameDepend.notify()
weakMap.get(info).get('infoGenderDep').notify()

现在发现手动将依赖存储到 map 中并将 map 放入 weakMap 维护这个树形结构是非常繁琐的。而且如果有些属性不会发生变化，那也不需要响应式操作了，那创建这个属性的依赖对象完全没必要。所以我们还是需要优化一下，需要响应式的创建 map 和 depend 对象，并且自动维护树形结构。

我们可以写一个 getDepend 函数专门来管理这种依赖关系：只要知道变化的对象和属性 ，就能找到 map 再找到 依赖对象，然后自动返回对应的 depend 对象。

getDepend 函数的实现需要响应的 对象和属性，所以我们先来完成响应式的实现，就是实现监听到对象的变化。

监听对象的变化

之前学过两种方式可以捕获对象的一些操作，这可以达到监听对象变化的效果。在收集依赖的基础上加上监听，完成响应式。更确切的说，需要监听的是 set 操作。

• 方式一：通过 Object.defineProperty的方式（vue2采用的方式）；
• 方式二：通过new Proxy的方式（vue3采用的方式）； ```javascript // 收集依赖的类 class Depend { constructor() { this.reactiveFns = [] // 每个实例化对象都维护了一个数组 } // 将依赖放入数组中 addDepend(fn) { this.reactiveFns.push(fn) } // 还可以把响应式执行封装一下 notify() { this.reactiveFns.forEach( fn => fn() ) } }

// 响应式函数 function watchFn(depend, fn) { depend.addDepend(fn) }

const obj = { name: ‘zs’, age: 18 }

// 依赖管理 const weakMap = new WeakMap() function getDepend(target, key) { // 具体实现略 return new Depend() }

// 响应式，捕获对象变化 const objProxy = new Proxy(obj, { set(target, key, newValue, receviecer) { Reflect.set(target, key, newValue, receviecer)

// 获取obj对象依赖并执行
const objDep = getDepend(target, key)
objDep.notify()

}, get(target, key, receviecer) { return Reflect.get(target, key, receviecer) } })

// obj 对象属性依赖 function objName1() { // name 变化后，需要重新执行的代码 console.log(objProxy.name) console.log(与 name 属性相关的其他代码1) }

// 不需要响应式的普通函数 function bar() { console.log(阿巴阿巴阿巴，不需要响应式的代码) }

// obj.name 发生变化 objProxy.name = ls

<a name="umKWu"></a>
## 依赖对象管理 `getDepend()`的实现
通过对象和属性，就查找weakmap 和 map 返回对应的依赖对象。
```javascript
// 依赖管理
const targetWeakMap = new WeakMap()
function getDepend(target, key) {
  // 树形结构第一层，根据target对象获取map的过程
  let targetMap = targetWeakMap.get(target) // 第一次执行，weakMap 里啥也没有，所以获取的 targetMap 为空
  // 对象第一次变化的时候需要创建对象对应的 map，并将 map 放入 weakMap
  if (!targetMap) {
    // 但是第二次变化，就不需要重新创建 map 并放入 weakMap 了，所以可以加个非空判断
    targetMap = new Map()
    targetWeakMap.set(target, targetMap)
  }
  // 树形结构第二层，属性的依赖对象，根据key获取depend对象
  let keyDepend = targetMap.get(key)
  if (!keyDepend) {
    keyDepend = new Depend()
    targetMap.set(key, keyDepend)
  }
  return keyDepend
}
// 响应式，捕获对象变化
const objProxy = new Proxy(obj, {
  set(target, key, newValue, receviecer) {
    Reflect.set(target, key, newValue, receviecer)
    // 获取obj对象依赖并执行
    const objDep = getDepend(target, key) // 因为还没收集依赖，所以这个 objDep 对象是空的
    objDep.notify()
  },
  get(target, key, receviecer) {
    return Reflect.get(target, key, receviecer)
  }
})

正确的收集依赖

依赖管理完成了，那怎么收集依赖呢？换句话怎么调用 addDepend()方法，将依赖放入 依赖对象维护的数组中。
要想调用 addDepend 方法，首先得找到对应的 depend 对象。现在 depend 对象是通过 对象和属性 创建的，那只要知道响应的对象和属性就能获取 depend 对象了。
而在这些与属性相关的代码中，如：objName1()，会读取属性的值objProxy.name这不是会被代理对象捕获到 get 吗，get 捕获器里面的 target 和 key ，就是当前响应时，依赖代码所依赖的 对象和属性，刚好就可以拿到对应的依赖对象。
所以只需要让 objName1 函数执行一次就行，我们可以在 watchFn 函数中完成这一步，watchFn 焕发新春，又有用了。

// obj 对象属性依赖
function objName1() {
  // name 变化后，需要重新执行的代码
  console.log(objProxy.name)
  console.log(`与 name 属性相关的其他代码1`)
}
// 响应式函数
// function watchFn(depend, fn) {
//   depend.addDepend(fn)
// }
function watchFn(fn) {
  fn() // 让依赖函数执行一次
}
watchFn(objName1)
// 响应式，捕获对象变化
const objProxy = new Proxy(obj, {
  set(target, key, newValue, receviecer) {
    Reflect.set(target, key, newValue, receviecer)
    // 获取obj对并执行
    const objDep = getDepend(target, key)
    objDep.notify()
  },
  get(target, key, receviecer) {
    // 收集依赖
    const keyDepend = getDepend(target, key) // 获取了对应的 depend 对象
    keyDepend.addDepend(fn)
    return Reflect.get(target, key, receviecer)
  }
})

现在获取了响应的依赖对象，那怎么知道哪个函数和这个响应出来的依赖对象对应，需要被放入这个依赖对象的数组中呢？也就是说响应的依赖对象要收集哪些函数？
为了获取响应的依赖对象，让依赖的函数执行了一次，这个函数不就是要被收集的目标之一吗？所以可以维护一个全局变量，保存这个执行的函数，等函数执行完，获取对象后，再把它放入数组中。

// 全局临时保存依赖函数的变量
let activeReactiveFn = null
function watchFn(fn) {
  activeReactiveFn = fn  // 保存依赖函数
  fn() // 让依赖函数执行一次
  activeReactiveFn = null // 复原
}
// 响应式，捕获对象变化
const objProxy = new Proxy(obj, {
  set(target, key, newValue, receviecer) {
    Reflect.set(target, key, newValue, receviecer)
    // 获取obj对并执行
    const objDep = getDepend(target, key)
    objDep.notify()
  },
  get(target, key, receviecer) {
    // 收集依赖
    const keyDepend = getDepend(target, key) // 获取了对应的 depend 对象
    keyDepend.addDepend(activeReactiveFn) // 收集对应的依赖
    return Reflect.get(target, key, receviecer)
  }
})

现在只要函数被 wacthFn 包裹，就能被正确对应地收集了。

重构 Depend 类

结合上面的代码，已经可以基本实现响应式了。但是还有一个问题，就是当响应函数中多次使用了对象变量时，它会重复将这个函数添加到依赖数组中。

// 收集依赖的类
class Depend {
  constructor() {
    this.reactiveFns = [] // 每个实例化对象都维护了一个数组
  }
  // 将依赖放入数组中
  addDepend(fn) {
    this.reactiveFns.push(fn)
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}
// 响应式函数
let activeReactiveFn = null
function watchFn(fn) {
  activeReactiveFn = fn  // 保存依赖函数
  fn() // 让依赖函数执行一次
  activeReactiveFn = null // 复原
}
const obj = {
  name: 'zs',
  age: 18
}
// 依赖管理
const targetWeakMap = new WeakMap()
function getDepend(target, key) {
  // 树形结构第一层，根据target对象获取map的过程
  let targetMap = targetWeakMap.get(target) 
  if (!targetMap) {
    targetMap = new Map()
    targetWeakMap.set(target, targetMap)
  }
  // 树形结构第二层，属性的依赖对象，根据key获取depend对象
  let keyDepend = targetMap.get(key)
  if (!keyDepend) {
    keyDepend = new Depend()
    targetMap.set(key, keyDepend)
  }
  return keyDepend
}
// 响应式，捕获对象变化
const objProxy = new Proxy(obj, {
  set(target, key, newValue, receviecer) {
    Reflect.set(target, key, newValue, receviecer)
    // 获取obj对并执行
    const objDep = getDepend(target, key)
    objDep.notify()
  },
  get(target, key, receviecer) {
    // 收集依赖
    const keyDepend = getDepend(target, key) // 获取了对应的 depend 对象
    keyDepend.addDepend(activeReactiveFn) // 收集对应的依赖
    return Reflect.get(target, key, receviecer)
  }
})
// obj 对象属性依赖
watchFn(() => {
  console.log(objProxy.name + 1111111111111)
  console.log(objProxy.name + 2222222222222)
})
// obj.name 发生变化
objProxy.name = `ls`
// zs1111111111111  // 在 watch 中调用了一次
// zs2222222222222
// ls1111111111111  // name 只发生了一次变化，可是依赖函数响应式地执行了两次
// ls2222222222222
// ls1111111111111
// ls2222222222222

这是因为在watchFn 中执行的一次，执行了两个 objProxy.name，这就触发了代理对象两次 get 捕获，捕获一次就会将当前响应函数放入数组中，这样就相当于重复将响应函数添加到数组中了。

这个时候就希望存储依赖函数的容器可以自动去重，数组不行，但是 Set 却可以。所以需将数组改成 Set。

还有一个优化点。
捕获器 get 中添加响应函数到 Set 中，需要关注全局变量 activeReactiveFn。所以可以改写 addDepend 方法，将它改成无参数的方法，添加响应函数进容器的时候，直接添加 activeReactiveFn，反正 activeReactiveFn 是全局变量。

// 保存当前需要收集的响应式函数
let activeReactiveFn = null
// 收集依赖的类
class Depend {
  constructor() {
    this.reactiveFns = new Set() // 每个实例化对象维护了一个 Set
  }
  // 将依赖放入数组中
  addDepend() {
    // 非空，调用时说明当前实例化对象下的 activeReactiveFn 保存了对应的响应函数
    if(activeReactiveFn) { 
      this.reactiveFns.add(activeReactiveFn) // 直接添加 activeReactiveFn
    }
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

创建响应式对象

我们目前的响应式是针对于obj 一个对象的，我们可以用函数再封装一下代理对象的捕获过程

// 给对象添加响应式的函数
function reactive(obj) {
  // 返回代理对象
   return new Proxy(obj, {
    set(target, key, newValue, receviecer) {
      Reflect.set(target, key, newValue, receviecer)
      // 获取obj对并执行
      const objDep = getDepend(target, key)
      objDep.notify()
    },
    get(target, key, receviecer) {
      // 收集依赖
      const keyDepend = getDepend(target, key) // 获取了对应的 depend 对象
      keyDepend.addDepend() // 收集对应的依赖
      return Reflect.get(target, key, receviecer)
    }
  })
}

vue3 的响应式原理

// 保存当前需要收集的响应式函数
let activeReactiveFn = null
// 收集依赖的类
class Depend {
  constructor() {
    this.reactiveFns = new Set() // 每个实例化对象维护了一个 Set
  }
  // 将依赖放入数组中
  addDepend() {
    // 非空，调用时说明当前实例化对象下的 activeReactiveFn 保存了对应的响应函数
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn) // 直接添加 activeReactiveFn
    }
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}
// 响应式函数
function watchFn(fn) {
  activeReactiveFn = fn // 保存依赖函数
  fn() // 让依赖函数执行一次
  activeReactiveFn = null // 复原
}
// 依赖对象管理，获取依赖对象
const targetWeakMap = new WeakMap()
function getDepend(target, key) {
  // 树形结构第一层，根据target对象获取map的过程
  let targetMap = targetWeakMap.get(target)
  if (!targetMap) {
    targetMap = new Map()
    targetWeakMap.set(target, targetMap)
  }
  // 树形结构第二层，属性的依赖对象，根据key获取depend对象
  let keyDepend = targetMap.get(key)
  if (!keyDepend) {
    keyDepend = new Depend()
    targetMap.set(key, keyDepend)
  }
  return keyDepend
}
// 给对象添加响应式的函数
function reactive(obj) {
  // 响应式，捕获对象变化，直接返回代理对象
   return new Proxy(obj, {
    set(target, key, newValue, receviecer) {
      Reflect.set(target, key, newValue, receviecer)
      // 获取obj对并执行
      const objDep = getDepend(target, key)
      objDep.notify()
    },
    get(target, key, receviecer) {
      // 收集依赖
      const keyDepend = getDepend(target, key) // 获取了对应的 depend 对象
      keyDepend.addDepend() // 收集对应的依赖
      return Reflect.get(target, key, receviecer)
    }
  })
}
const obj = {
  name: 'zs',
  age: 18
}
// 给 obj 对象增加响应式处理
const objProxy = reactive(obj)
// obj 对象属性依赖
watchFn(() => {
  console.log(objProxy.name + 1111111111111)
  console.log(objProxy.name + 2222222222222)
})
objProxy.name = 'ls'
// 给 info 对象增加响应式处理
// 直接在声明的时候就添加，表明看是 info ，其实是 info 的代理对象
const info = reactive({
  name: 'w5',
  gender: 'man'
})
// 自动执行的依赖函数
watchFn(() => {
  console.log(info.gender);
  console.log('gender 属性变化了');
})
info.gender = 'woman'
// zs1111111111111
// zs2222222222222
// ls1111111111111
// ls2222222222222
// man
// gender 属性变化了
// woman
// gender 属性变化了

vue2 的响应式原理

vue2 的响应式其他的逻辑都是一样的，无非就是监听对象变化用的是 Object.defineProperty()中的 setter、getter。

function reactive(obj) {
  // 遍历属性，监听每个属性
  Object.keys(obj).forEach(key => {
    // 保存当前属性值
    let value = obj[key]
    // set，get 设置响应式逻辑
    Object.defineProperty(obj, key, {
      get() {
        // 收集依赖
        getDepend(obj, key).addDepend()
        return value
      },
      set(newValue) {
        value = newValue
        // 获取依赖对象，唤醒依赖
        getDepend(obj, key).notify()
      }
    })
  })
  // 返回处理过属性描述符的对象
  return obj
}

// 保存当前需要收集的响应式函数
let activeReactiveFn = null
// 收集依赖的类
class Depend {
  constructor() {
    this.reactiveFns = new Set() // 每个实例化对象维护了一个 Set
  }
  // 将依赖放入数组中
  addDepend() {
    // 非空，调用时说明当前实例化对象下的 activeReactiveFn 保存了对应的响应函数
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn) // 直接添加 activeReactiveFn
    }
  }
  // 还可以把响应式执行封装一下
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}
// 响应式函数
function watchFn(fn) {
  activeReactiveFn = fn // 保存依赖函数
  fn() // 让依赖函数执行一次
  activeReactiveFn = null // 复原
}
// 依赖管理
const targetWeakMap = new WeakMap()
function getDepend(target, key) {
  // 树形结构第一层，根据target对象获取map的过程
  let targetMap = targetWeakMap.get(target)
  if (!targetMap) {
    targetMap = new Map()
    targetWeakMap.set(target, targetMap)
  }
  // 树形结构第二层，属性的依赖对象，根据key获取depend对象
  let keyDepend = targetMap.get(key)
  if (!keyDepend) {
    keyDepend = new Depend()
    targetMap.set(key, keyDepend)
  }
  return keyDepend
}
// 给对象添加响应式的函数
function reactive(obj) {
  // 遍历属性，监听每个属性
  Object.keys(obj).forEach(key => {
    // 保存当前属性值
    let value = obj[key]
    // set，get 设置响应式逻辑
    Object.defineProperty(obj, key, {
      get() {
        // 收集依赖
        getDepend(obj, key).addDepend()
        return value
      },
      set(newValue) {
        value = newValue
        // 获取依赖对象，唤醒依赖
        getDepend(obj, key).notify()
      }
    })
  })
  // 返回处理过属性描述符的对象
  return obj
}
// 给 info 对象增加响应式处理
// 直接在声明的时候就添加，表明看是 info ，其实是处理过属性描述符的 info 对象
const info = reactive({
  name: 'w5',
  gender: 'man'
})
// 自动执行的依赖函数
watchFn(() => {
  console.log(info.gender)
  console.log('gender 属性变化了')
})
info.gender = 'woman'
// man
// gender 属性变化了
// woman
// gender 属性变化了

响应式大总结

1. 依赖类收集依赖
   1. 构造函数中维护一个 Set 集合
   2. 一个将依赖函数添加到集合的方法
   3. 一个执行集合冲依赖函数的方法
2. 响应式对象函数
   1. 两种监听对象的方式
      1. Proxy + Reflect：handler 对象中捕获器捕获对象的属性操作
      2. Object.defineProperty()：遍历 key，挨个设置属性描述符
   2. get 中返回属性值外，还获取依赖对象并收集依赖到 Set 集合中
   3. set 中除设置值外，还获取依赖对象并唤醒依赖函数执行
   4. 返回处理过后支持响应式对象
3. 依赖对象管理，响应式获取依赖对象
   1. 根据目标对象从 WeakMap 中获取对应的 Map
   2. 再根据目标对象的属性从 Map 中获取对应的依赖对象
   3. 注意处理第一次的响应时新建依赖对象和 Map
4. 响应式函数
   1. 将依赖函数存入响应式函数执行一次，并赋值给全局变量
   2. 全局变量注意复原
5. 直接在 reactIve 函数中定义对象，之后就使用处理过的对象
6. 对象属性操作直接在 watchFn 函数中定义，成为待收集的依赖