vue响应式简单实现

一、写在前面
关于MVVM开发模式，不得不说其响应式原理。响应式是MVVM架构和MVP之间最为显著的区别。在以前使用MVP架构进行前端开发时，其中间层p需要处理的逻辑特别多，导致比较臃肿。随着MVVM架构的出现，大大减少了中间层处理的业务逻辑。原因是其响应式原理，视图可以触发其中的某一个指令来改变数据，当数据改变时，视图也会随之刷新。下面我们将简单实现一个响应式。
二、vue2和vue3的响应式的区别
在vue2中我们对响应式数据进行监听时，使用的是Object.defineProperty方法来实现的，在vue3中使用的是Proxy来实现响应式的。vue3相比于vue2来说可以监听更多类型的数据改变。
三、vue2的响应式实现

let activeFns = null

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

class Depend {
   
  constructor() {
   
    this.deps = new Set()
  }
  depend() {
   
    if(activeFns) {
   
      this.deps.