|
VUE2.0和3.0數(shù)據(jù)雙向綁定的原理，并說出其區(qū)別。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0/3.0雙向數(shù)據(jù)綁定原理</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 數(shù)據(jù)劫持實(shí)現(xiàn) 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、需要分別給對象中指定每一個(gè)屬性設(shè)置監(jiān)聽 * */ // 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() } }) // 不需要克隆，只需要整個(gè)對象進(jìn)行代理 function observer2() { document.getElementById('name2').innerHTML = document.getElementById('inputText2').value = obj2.name; } function changeTxt2() { obj2.name = document.getElementById('inputText2').value; } </script> </body> </html>
|
|
|
