arduinowifi.send怎么获取响应_Vue3.0 响应式原理 （一）
前幾天，回顧整理下關(guān)于vue2.0的響應(yīng)式原理。溫故而知新么，那么今天，整理了一下關(guān)于vue3.0的響應(yīng)式原理，利用 JavaScript 來寫的。本著盡可能的清晰易懂的原則，所以，可能會(huì)分幾篇文章來發(fā)布。那現(xiàn)在開始上菜。
盤它！
敲黑板，面試必問，你覺得vue2.0 和vue3.0 的區(qū)別；或者說，你覺得vue3.0比vue2.0好在哪兒？ 如果你只說 vue2.0 是基于Object.definePropery, vue3.0是基于Es6的proxy來架構(gòu)的，僅此而已的話，那顯然是不夠的。
- 首先我們說vue2.0 有哪些缺點(diǎn)或者說不足吧！
Vue3.0 手?jǐn)]版開擼
首先來說我們要知道，vue3.0的響應(yīng)式數(shù)據(jù)，是怎么搞的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3 原理</title> </head> <body><script src="vue.global.js"></script><script> let proxy = Vue.reactive({name: 'bryant'});// 副作用 Vue.effect 默認(rèn)會(huì)先執(zhí)行一次,先打印出 'bryant',而后 proxy.name 的值發(fā)生改變,則會(huì)在執(zhí)行一次 打印出 'wzy'Vue.effect(()=> {console.log(proxy.name)})proxy.name = 'wzy'proxy.name = 'yolin'</script> </body> </html>是代碼中的這個(gè) Vue.reactive({name: 'bryant'})這個(gè)api 是吧！
那么我們創(chuàng)建一個(gè)js文件，定義一個(gè)這樣的函數(shù)
// 1.響應(yīng)式的核心方法function reactive(target) {// 創(chuàng)建響應(yīng)式對(duì)象return createReactiveObject(target) }; // 2. 創(chuàng)建響應(yīng)式對(duì)象 function createReactiveObject (target) {if(!isObject(target)){return target; // 判斷如果不是對(duì)象那就直接把他返回出去;};// 創(chuàng)建一個(gè)觀察者, 此處是vue3的核心了，不在使用object.defineProperty 而是是用來自ES6的 proxy;// baseHandle 對(duì)象中就存放一些，攔截的函數(shù)了，比如get set方法等;let baseHandle = {// 形參中的target 值得是原對(duì)象,指的是下面定義的 let data = {name: 'wzy'};,key 指的是你要獲取的某個(gè)屬性// receiver 指的是下面的proxy, 也就是data 被代理后的對(duì)象get(target,key, receiver) {console.log('獲取');// 理論上取值的話是這樣的// return target[key];// 但是在vue3中 proxy 是和一個(gè)新的api結(jié)合使用的 reflect 反射let result = Reflect.get(target,key,receiver);return result;},set(target,key,value,receiver) {console.log('設(shè)置');let flag = Reflect.set(target,key,value,receiver); // 返回的是一個(gè)布爾類型，ture && false 告訴設(shè)置是否成功return flag;},deleteProperty(target,key) {console.log('刪除');let res = Reflect.deleteProperty(target,key);return res;}};let observer = new Proxy(target, baseHandle); return observer; }; // 3. isObject(); 該函數(shù)就是判斷是不是對(duì)象function isObject(val) {return typeof val === 'object' && val !== null; };簡(jiǎn)單說一下： 首先reactive函數(shù)里面return的 createdReactiveObject() 函數(shù)，是創(chuàng)建響應(yīng)式的主體，
首先在c函數(shù)中先判斷傳進(jìn)來的數(shù)據(jù)是否為對(duì)象，如果不是對(duì)象，就return出去，是對(duì)象的話，則聲明一個(gè)變量，來接受Proxy的實(shí)例，并且把這個(gè)對(duì)象傳給 Proxy();
如果對(duì) Proxy 不是很了解的同學(xué)，可以去讀一下阮一峰老師的Es6很詳細(xì)。
那么簡(jiǎn)單的說下Proxy， 利用Proxy可以對(duì)，所要操作的對(duì)象，架設(shè)一層攔截，在這個(gè)攔截中，可以做一些我們想做的事情。那么，它所接受的第一個(gè)參數(shù)，則是要操作的目標(biāo)對(duì)象數(shù)據(jù)，那么第二個(gè)參數(shù)，也是對(duì)象類型，那么在這個(gè)對(duì)象里面則是一些關(guān)于可以捕獲到的攔截的方法。比如： get set delete 等等。所以第二個(gè)參數(shù)我們創(chuàng)建一個(gè)baseHandle對(duì)象用來存放一些方法。
如果上述說的不是很全面，歡迎大神掄錘！
那么下面則是一部分 測(cè)試數(shù)據(jù)
let data = {name: 'wzy'};// proxy 為經(jīng)過 reactive();函數(shù)處理過后的 代理對(duì)象 let proxy = reactive(data); proxy.name = 'yolin' console.log(proxy.name) // 刪除 delete proxy.name; console.log(proxy)本篇文章說的不是全部vue3.0的響應(yīng)式原理，只是數(shù)據(jù)是一層的情況下的。咱們拆開來一步步了解，會(huì)很清晰。
但是看得懂不如自己手?jǐn)]一遍來的實(shí)際。擼吧騷年！
總結(jié)
以上是生活随笔為你收集整理的arduinowifi.send怎么获取响应_Vue3.0 响应式原理 （一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中证500是什么
- 下一篇： mysql bin oct_py