点击刷新
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>
© 著作权归作者所有
举报
发表评论
0/200
