本文主要介绍vue响应式数据的简易实现过程

由于我的语言组织表达能力不足，所以就只能在代码片段末尾，附上了我的个人思路。

// 发布者类
class Dep {
  constructor() {
    // 订阅者
    this.subscribers = new Set()
  }
   // 收集订阅者
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect)
    }
  }
  // 通知订阅者更新数据
  notify() {
    this.subscribers.forEach(fun => {
      fun()
    })
  }
}

// 用来收集订阅者 
let activeEffect = null
function watchEffect(effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}

/**
 * WeakMap: 用来包裹传入的对象(垃圾回收机制)
 * 传入的对象：是一个map对象(用来建立对应的映射)
 * map对象：每一项都是一个Dep(发布者)
 * 
 * 也就是说：getDep函数的作用就是给每一项数据都建立一个对应的发布者
 */
const targetMap = new WeakMap()
// 用来建立对应的发布者
function getDep(target, key) {
  // 根据传入的对象，获取对应的map对象
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    // 给对应的map对象赋值
    targetMap.set(target, depsMap)
  }
  // 获取key属性对应的dep对象(获取key对应的发布者)
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Dep()
    depsMap.set(key, dep)
  }
  return dep
}
// vue2
function reactive(raw) {
  Object.keys(raw).forEach(key => {
    let value = raw[key]
    const dep = getDep(raw, key)
    Object.defineProperty(raw, key, {
      get() {
        // 收集依赖
        dep.depend()
        return value
      },
      set(newValue) {
        value = newValue
        // 通知订阅者们更新数据
        dep.notify()
      }
    })
  })
  return raw
}

// vue3
// function reactive(raw) {
//   return new Proxy(raw, {
//     get(target, key) {
//       const dep = getDep(raw, key)
//       dep.depend()
//       return target[key]
//     },
//     set(target, key, newValue) {
//       const dep = getDep(raw, key)
//       target[key] = newValue
//       dep.notify()
//     }
//   })
// }


// 测试代码
const info = reactive({ name: 'summer', age: 18 })
const info2 = reactive({ height: 1.88, weight: 188 })

watchEffect(function () {
  console.log('effect1', info.name, info.age)
})
watchEffect(function () {
  console.log('effect2', info2.height, info2.weight)
})

info.name = 'black'
// info2.height = 1.66

/**
 * 思路：
 * 1. 定义变量并赋值时，对变量进行截取(reactive)，利用Object.defineProperty重写它的get和set方法
 *      get方法中dep.depend用于收集数据的依赖(订阅者)
 *      set方法中dep.notify用于通知订阅者更新数据
 * 2. reactive方法中有getDep()方法的执行，getDep方法的目的是：给每个数据项建立一个对应的发布者
 *      当执行这个函数的时候会传入两个参数：target目标对象，key目标对象中的属性，
 *      第一次执行这个函数时，target还是普通对象，这时候将会将target转化为map对象，并且target和map-target作为targetMap的一个键值对，
 *      这时候再将第一次执行的属性(target对象里的属性)的属性值都设置为dep对象(发布者)
 * 3. 类Dep，用于创建发布者(dep)和收集这个发布者对应的订阅者(subscribers)的，当一个数据被重新赋值时，就通过notify通知订阅者执行，更新数据
 *      Dep中的depend用于收集这个发布者(数据项)对应的所有订阅者
 */

如果看完了这篇文章，对vue整个响应式流程感兴趣的话，可以看我的另一篇文章https://www.jianshu.com/p/280c45ddbc8f。

如有错误，欢迎指正！