VUE2.0和3.0資料雙向系結的原理，并說出其區別，
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0/3.0雙向資料系結原理</title> </head> <body> 姓名：<span id="name"></span> <br> <input type="text" id="inputText" oninput="changeTxt2()"> <hr> 姓名：<span id="name2"></span> <br> <input type="text" id="inputText2" oninput="changeTxt2()"> <script> // 2.0 // ES5：Object.defineProperty 資料劫持實作 let obj = {name: ''}; let newObj = JSON.parse(JSON.stringify(obj)) Object.defineProperty(obj, 'name', { get() { return newObj.name }, set(value) { if (value === newObj.name) return; newObj.name = value; observer(); } }) function observer() { document.getElementById('name').innerHTML = document.getElementById('inputText').value = obj.name; } function changeTxt() { obj.name = document.getElementById('inputText').value; } /* * 弊端： * 1、需要將原來的物件克隆一份 * 2、需要分別給物件中指定每一個屬性設定監聽 * */ // 3.0 // ES6：Proxy 委托代理 let obj2 = {}; obj2 = new Proxy(obj2, { get(target, prop) { // target，代理的物件 // prop，代理物件的屬性 return target[prop] }, set(target, prop, value) { target[prop] = value observer2() } }) // 不需要克隆，只需要整個物件進行代理 function observer2() { document.getElementById('name2').innerHTML = document.getElementById('inputText2').value = obj2.name; } function changeTxt2() { obj2.name = document.getElementById('inputText2').value; } </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14882.html
標籤：JavaScript
下一篇：作用域那點事