es6 Proxy 簡寫 Vue3.0 的雙向繫結
阿新 • • 發佈：2020-12-12
小小實習生，大佬請賜教
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="input"> <pid="text">hello world</p> <script> let input = document.getElementById('input'); let text = document.getElementById('text'); let obj = {}; // Proxy 第一個引數 要攔截的目標物件，這裡指 obj, 第二個引數 處理程式物件 這裡直接 {} 並定義 get、set 捕獲器 let proxy = new Proxy(obj, {// get 第一個引數 目標物件，這裡指 obj，第二個引數 屬性，這裡指 val get(target, property){ return target[property]; // 紅寶書上說 返回值無限制 }, // set 前兩個引數 同 get， 第三個引數是 要設定的值 set(target, property, value){ target[property] = value; // 相當於 obj[val] = 5; text.innerText= target[property]; // 把值 賦值給 text return; // set 的返回值 true 表示成功 false 表示失敗 } }) /* 預設先把 text 值 賦值給 input */ proxy.val = text.innerText; input.value = proxy.val; // input 輸入時觸發 input.addEventListener('input', function(){ proxy.val = this.value; // 給 proxy.val 賦值 會呼叫 set 捕獲器 }) </script> </body> </html>