// let p = new Proxy(target, handler); // 参数target // 用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 // 参数handler // 一个对象，其属性是当执行一个操作时定义代理的行为的函数。
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <input type="text" v-model="name"><br> 姓名：{ {name}}<br> 年龄：{ {age}} </div> </body> <script> let el=document.getElementById('div1');
let template=el.innerHTML;
let _data={ name: 'blue', age: 18 };
let data=new Proxy(_data, { set(obj, name, value){ //alert(`有人视图设置 ${name}=>${value}`); obj[name]=value;
//数据变了 //console.log('数据变了'); render(); } });
render();
function render(){ //渲染 el.innerHTML=template.replace(/\{\{\w+\}\}/g, str=>{ str=str.substring(2, str.length-2);
return _data[str]; });
//找所有的v-model Array.from(el.getElementsByTagName('input')) .filter(ele=>ele.getAttribute('v-model')) .forEach(input=>{ let name=input.getAttribute('v-model'); input.value=_data[name];
input.οninput=function (){ data[name]=this.value; }; }); } </script> </html>