Shulou(Shulou.com)06/02 Report--

What this article shares with you is about how to analyze the responsive principle of Vue3. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Review of the principle of Vue2 response / / 1. Object responsiveness: iterate through each key, defining getter, setter// 2. Array responsiveness: overrides the array prototype method, adding additional notification logic const originalProto = Array.prototypeconst arrayProto = Object.create (originalProto) ['push',' pop', 'shift',' unshift', 'splice',' reverse', 'sort'] .forEach (method = > {arrayProto [method] = function () {determinalProto.apply (this, arguments) notifyUpdate ()}}) function observe (obj) {if (typeof obj! = =' object' | | obj = = null) {return} / / add array type judgment If the array is an array, overwrite its prototype 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) {/ / determine whether the object if (! isObject (obj)) {return obj} const observed = new Proxy (obj, {get (target, key, receiver) {/ / if the object requires recursive return isObject (res)? Reactive (res): res}, / /...} avoid duplicate proxies

Repeat agents, such as

Reactive (data) / / pure objects that have been proxied

Reactive (react) / / proxy object

Solution: cache the previous proxy results and use them directly in get

Const toProxy = new WeakMap () / / like obj:observed const toRaw = new WeakMap () / / like observed:obj function reactive (obj) {/ /... / Lookup cache Avoid duplicate proxy if (toProxy.has (obj)) {return toProxy.get (obj)} if (toRaw.has (obj)) {return obj} const observed = new Proxy (...) / / cache proxy result toProxy.set (obj, observed) toRaw.set (observed) Obj) return observed} / / Test effect console.log (reactive (data) = state) console.log (reactive (state) = state) above is how to analyze the responsive principle of Vue3 The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.