vue3 原始碼解析學習筆記--- vue2.0 和vue3.0實現雙向繫結的簡單比較
阿新 • • 發佈：2022-03-22
vue 2.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="yingaxiang" content="width=device-width, initial-scale=1.0"> <title>vue2.x資料雙向繫結</title> </head> <body> <div> <input type="text" id="input"> <span id="text"></span> </div> </body> </html> <script> var obj = {}; Object.defineProperty(obj, 'prop', { get: function () { return val; }, set: function (newVal) { val = newVal; document.getElementById('text').innerHTML = val; } }); document.addEventListener('keyup', function (e) { obj.prop = e.target.value; }); </script>
vue 3.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="yingaxiang" content="width=device-width, initial-scale=1.0"> <title>vue3.0資料雙向繫結</title> </head> <body> <div> <input type="text" id="input"> <span id="text"></span> </div> </body> </html> <script> var obj = {}; var obj1 = new Proxy(obj, { // target就是第一個引數obj, receive就是返回的obj(返回的proxy物件) get: function (target, key, receive) { // 返回該屬性值 return target[key]; }, set: function (target, key, newVal, receive) { // 執行賦值操作 target[key] = newVal; document.getElementById('text').innerHTML = target[key]; } }) document.addEventListener('keyup', function (e) { obj1[0] = e.target.value; }); </script>
3.proxy相較於object.defineProperty的優勢
*直接監聽物件而非屬性
*直接監聽陣列的變化
*攔截方式較多（有13種方式）
*Proxy返回一個新物件，可以只操作新物件達到目的，而Object.defineProperty只能遍歷物件屬性直接修改（需要用深拷貝進行修改）
*Proxy作為新標準將受到瀏覽器廠商重點持續的效能優化