您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章给大家分享的是有关如何解析Vue3的响应式原理,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
// 1.对象响应化:遍历每个key,定义getter、setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const originalProto = Array.prototype const 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使用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的响应式原理,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。