<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> 姓名：{{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}`); alert(obj); 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]; }); } </script> </html>