vue資料雙向繫結實現
阿新 • • 發佈：2022-03-22
1.vue2.0資料劫持defineProperty之後，結合釋出訂閱這模式
缺點：不能監聽陣列變化，必須遍歷物件的每個屬性，必須深層遍歷巢狀的物件
2.vue3.0資料代理proxy 可以直接監聽物件，陣列(而非屬性)
簡單實現，通過Object物件的 defineProperty屬性，重寫data的get和set方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 檢視 --> <div id="app"> <h1>{{msg}}</h1> </div> <script> // 模板 let data= { msg: 'hello msg', _data: {} } // 設定特性 Reflect.defineProperty(data, 'msg', { // 取值器 get() { console.log('get', this, arguments); // 獲取備份物件 return this._data.msg; }, // 賦值器 set(val) { console.log('set', this, arguments); // 設定備份物件 this._data.msg = val; //檢視顯示 updataView(this._data); } }) let tpl = document.getElementById('app').innerHTML; function updataView(data) { let html = tpl.replace(/{{(\w+)}}/, (match, $1) => { return data[$1]; }) document.getElementById('app').innerHTML = html; } // 設定 觸發賦值器 data.msg = 'hello world'; // 讀取 觸發取值器 console.log(data.msg); </script> </body> </html>