详解Vue3的响应式原理解析

// 1.对象响应化：遍历每个key，定义getter、setter// 2.数组响应化：覆盖数组原型方法，额外增加通知逻辑const originalProto = Array.prototypeconst arrayProto = Object.create(originalProto)  ;['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(    method => {      arrayProto[method] = function () {        originalProto[method].apply(this, arguments)        notifyUpdate()      }    }  )function observe (obj) {  if (typeof obj !== 'object' || obj == null) {    return  }  // 增加数组类型判断，若是数组则覆盖其原型  if (Array.isArray(obj)) {    Object.setPrototypeOf(obj, arrayProto)  } else {    const keys = Object.keys(obj)    for (let i = 0; i < keys.length; i++) {      const key = keys[i]      defineReactive(obj, key, obj[key])    }  }}function defineReactive (obj, key, val) {  observe(val) // 解决嵌套对象问题  Object.defineProperty(obj, key, {    get () {      return val    },    set (newVal) {      if (newVal !== val) {        observe(newVal) // 新值是对象的情况        val = newVal        notifyUpdate()      }    }  })}function notifyUpdate () {  console.log('页面更新!')}

function reactive (obj) {  if (typeof obj !== 'object' && obj != null) {    return obj  }  // Proxy相当于在对象外层加拦截  // http://es6.ruanyifeng.com/#docs/proxy  const observed = new Proxy(obj, {    get (target, key, receiver) {      // Reflect用于执行对象默认操作，更规范、更友好      // Proxy和Object的方法Reflect都有对应      // http://es6.ruanyifeng.com/#docs/reflect      const res = Reflect.get(target, key, receiver)      console.log(`获取${key}:${res}`)      return res    },    set (target, key, value, receiver) {      const res = Reflect.set(target, key, value, receiver)      console.log(`设置${key}:${value}`)      return res    },    deleteProperty (target, key) {      const res = Reflect.deleteProperty(target, key)      console.log(`删除${key}:${res}`)      return res    }  })  return observed}//代码测试const state = reactive({  foo: 'foo',  bar: { a: 1 }})// 1.获取state.foo // ok// 2.设置已存在属性state.foo = 'fooooooo' // ok// 3.设置不存在属性state.dong = 'dong' // ok// 4.删除属性delete state.dong // ok

// 设置嵌套对象属性react.bar.a = 10 // no ok

      // 提取帮助方法      const isObject = val => val !== null && typeof val === 'object'      function reactive (obj) {        //判断是否对象        if (!isObject(obj)) {          return obj        }        const observed = new Proxy(obj, {          get (target, key, receiver) {            // ...            // 如果是对象需要递归            return isObject(res) ? reactive(res) : res          },          //...        }

const toProxy = new WeakMap() // 形如obj:observed      const toRaw = new WeakMap() // 形如observed:obj      function reactive (obj) {        //...        // 查找缓存，避免重复代理        if (toProxy.has(obj)) {          return toProxy.get(obj)        }        if (toRaw.has(obj)) {          return obj        }        const observed = new Proxy(...)        // 缓存代理结果        toProxy.set(obj, observed)        toRaw.set(observed, obj)        return observed      }      // 测试效果      console.log(reactive(data) === state)      console.log(reactive(state) === state)