题解 | #双向绑定# 好题

      var ul = document.querySelector("ul");
      var person = {
        sex: "男",
        age: "25",
        name: "王大锤",
        height: 28,
        weight: 32,
      };
      var inp = document.querySelector("input");
      inp.value = person.weight;
      const _render = () => {
        var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`;
        ul.innerHTML = str;
        inp.value = person.weight;
      };
      _render(ul);
      // 补全代码
      //根据input的value重新给属性赋值
      inp.oninput = function () {
        person.weight = this.value;
      };


     //定义对象的属性重新赋值时进行的操作
      //   handler里面不能定义变量，所以定义的变量要放在外面
      Object.keys(person).forEach((key) => {
        let value = person[key];
        Object.defineProperty(person, key, {
          get() {
            return value;
          },
          set(newVal) {
            value = newVal;
            _render();
          },
        });
      });
    </script>