如何解析Vue3的响应式原理

本篇文章给大家分享的是有关如何解析vue3的响应式原理，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

Vue2响应式原理回顾

// 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('页面更新!')}

vue2响应式弊端：
响应化过程需要递归遍历，消耗较大
新加或删除属性无法监听
数组响应化需要额外实现
Map、Set、Class等无法响应式
修改语法有限制

Vue3响应式原理剖析

vue3使用es6的Proxy特性来解决这些问题。

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          },          //...        }

避免重复代理

重复代理，比如

reactive(data) // 已代理过的纯对象
reactive(react) // 代理对象

解决方式：将之前代理结果缓存，get时直接使用

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)

以上就是如何解析Vue3的响应式原理，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。