SOURCE

console 命令行工具 X clear

                    
>
console
function observer(target) {
     const div = document.getElementById("container");
     const ob = {};
     const props = Object.keys(target);
     for (const prop of props) {
         Object.defineProperty(ob, prop, {
             get() {
                 return target[prop];
             },
             set(val) {
                 console.log(`setting!`)
                 target[prop] = val;
                 debugger;
                 render();
             },
             enumerable: true
         })
     }
     render();

     function render() {
         let html = "";
         for (const prop of Object.keys(ob)) {
             html += `<p>
         <span>hello${prop}:</span>
         <span>${ob[prop]}</span>
     </p>`
         }
         div.innerHTML = html;
     }
     return ob;
 }
 debugger;
 const target = {
     a: 1,
     b: 4
 }
 const obj = observer(target);

 setTimeout(function() {
     // 期望页面中a会变成99, 实际结果:没有变,为什么?
     obj.a = 45;

 }, 1000)
<div id='container'></div>