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