利用ES6中的Proxy和Reflect 實現簡單的雙向數據綁定
阿新 • • 發佈：2018-12-14
prope tlist lec ntb col lis pan pro ref
利用ES6中的Proxy (代理) 和 Reflect 實現一個簡單的雙向數據綁定demo。
好像vue3也把 obj.defineProperty() 換成了Proxy+Reflect。
話不多說，直接上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>proxy</title> </head> <body> <h1>使用Proxy 和 Reflect 實現雙向數據綁定</h1> <input type="text" id="input"> <h2>您輸入的內容是： <i id="txt"></i></h2> <script> //獲取dom元素 let oInput = document.getElementById("input"); let oTxt = document.getElementById("txt"); //初始化代理對象 let obj = {};//給obj增加代理對象 let newProxy = new Proxy(obj,{ get: (target,key,recevier)=>{ //console.log("get:"+ key) return Reflect.get(target,key,recevier); }, set: (target,key,value,recevier)=>{ //監聽newProxy是否有新的變化 if(key == "text"){ oTxt.innerHTML = value; } //將變化反射回原有對象 return Reflect.set(target,key,value,recevier); } }) //監聽input輸入事件 oInput.addEventListener("keyup",(e)=>{ //修改代理對象的值 newProxy.text = e.target.value; }) </script> </body> </html>
實現的效果：
監聽input 的時候修改newProxy的值，檢測到newProxy 重新設置了值得時候，因為newProxy代理了obj這個對象， 所以可以調用Reflcet 反射到原obj.
所以我修改了Input 的值後，然後控制臺輸入obj,會打印出input的值。
newProxy利用ES6中的Proxy和Reflect 實現簡單的雙向數據綁定