Home JavaScript JavaScript 手写原理

# 什么是响应式？

  • 我们先来看一下响应式意味着什么？我们来看一段代码：

    • 有一个初始化的值，有一段代码使用了这个值；
    • 当 n 发生了改变 下面的数据应该重新执行一遍 就应该会输出 40
    let n = 10
    console.log(n * 2) // 第一次执行结果为： 20
    n = 20
    //n * 2 触发响应式自动执行第二次结果为 40
    • 

  • 

    上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。
    

    • 



# 响应式函数设计


    

  • 

    首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中：
    

      

    • 那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数；
      • 

    

    • 

  • 

    但是有一个问题：在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢？
    

      

    • 很明显，下面的函数中 foo 需要在 lain 的 name 发生变化时，重新执行，做出相应；
      • 

    • bar 函数是一个完全独立于 lain 的函数，它不需要执行任何响应式的操作；
      • 

    

    function foo(){
        let newName = lain.name
        console.log(lain.name)
    }
    function bar(){
        const result = 10 + 20
    }
    • 



# 响应式函数的实现思路


    

  • 

    封装 watchFn  响应式函数
    

    • 

  • 

    封装用于响应式依赖的收集函数
    

    • 

  • 

    监听对象变化可使用的两种方法
    

      

    • 通过 Object.defineProperty 的方式（vue2 采用的方式）；
      • 

    • 通过 new Proxy 的方式（vue3 采用的方式）；
      • 

    

    • 

  • 

    Depend 对象的依赖管理
    

      

    • 创建了一个 Depend 类，用来管理对于 name 变化需要监听的响应函数。
      • 

    • 但是实际开发中我们会有不同的对象，另外会有不同的属性需要管理，我们可以通过 WeakMap 数据结构来管理不同对象的不同依赖关系
      • 

    

    • 

  • 

     WeakMap 数据结构  
    

    • 

  • 

     map -> [key: property(属性名), value: Fns(响应式函数)] 
    

    • 

  • 

     WeakMap -> [key: target(对象), value: map]     
    

    • 



# Proxy 实现


// 定义全局变量保存响应式函数
let activeReactiveFn = null
// 1. 封装响应式函数
function watchFn(fn) {
  // 将函数保存到全局变量 方便后续 add 函数
  activeReactiveFn = fn
  // 调用函数
  fn()
  // 重置为 null
  activeReactiveFn = null
} 
// 2. 设计一个类 用于管理某一个对象的某一个属性的所有响应式函数
class Depend {
  constructor() {
    // 使用 Set 避免获取重复函数 进行重复调用
    this.reactiveFns = new Set()
  }
  // 将依赖的函数添加进 reactiveFns 中，以供 notify 顺利执行
  depend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn)
    }
  }
  // 通知遍历执行所有需要响应式的函数
  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}
// 定义存储的数据结构
// WeakMap -> [key: target, value: map] 结构
const targetMap = new WeakMap()
// 3. 封装一个获取 getDepend 函数 进行收集依赖
function getDepend(target, key){
  // 获取 target 的所有依赖 Fns
  let map = targetMap.get(target)
  
  // 如果 map 没有获取到 则 undefined 就 new 一个
  if (!map) {
    map = new Map()
    // 将 targetMap 以 -> [key: target (对象), value: map (map 结构)] 设置值
    targetMap.set(target, map)
  }
  //depend 为实例对象  将响应式的 Fns 添加进实例的 reactiveFns 中
  let depend = map.get(key)
  // 如果属性没有 depend 实例 则 undefined 就 new 一个
  if (!depend) {
    // 相当于给每个属性都添加了一个 Depend 实例
    depend = new Depend()
    // 将 map 以 [key: 属性名，value: depend] 传入 map 结构中
    map.set(key, depend)
  }
  // 将实例对象返回出去 
  return depend
}
// 4. 使用 Proxy 监听对象的变化 (vue3 采用的方式)
function reactive(obj) {
  const handler = {
    // 收集依赖
    get(target, key, receiver) {
      // 接收 getDepend 处理的返回值 -> Depend 实例
      const depend = getDepend(target, key)
      // 调用实例方法 将函数添加到 reactiveFns 中
      depend.depend()
      return Reflect.get(target, key, receiver)
    },
    set(target, key, newValue, receiver) {
      if (target[key] === newValue) return;
      Reflect.set(target, key, newValue, receiver)
      // 接收 getDepend 处理的返回值 -> Depend 实例
      const depend = getDepend(target, key)
      // 通知应执行的响应式函数 -> 执行
      depend.notify()
    }
  }
  // 封装的 reactive 函数，实现复用 传入需要代理的对象进行监听即可
  return new Proxy(obj, handler)
}
// 测试: 
//lain 对象进行响应式
const lain = reactive({
  name: 'lain',
  age: 16
})
// 需要响应式的函数
watchFn(() =>　{
  console.log(lain.name, '我被代理了~~~~~')
  // 第一次执行: lain 我被代理了～～～～～
})
lain.name = 'saber'
// 触发响应式第二次执行: saber 我被代理了～～～～～
# Object.defineProperty 实现


    

  • 将 reactive 改为下面代码即可：不再释义
    • 



function reactive(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get() {	
        const depend = getDepend(obj, key)
        depend.depend()
        return value
      },
      set(newValue) {
        const depend = getDepend(obj, key)
        depend.notify()
      }
    })
  })
  
  return obj
}