题解 | #双向绑定#

思路：遍历对象obj的每一个键，然后对该键设置Object.defineProperty方法进行监听，其中处理对象中，get方法直接返回键所对应的值，set方法直接将键设置为新值，并且触发_render函数进行渲染。当渲染时，将person. weight绑定到inp.value；当输入时，将inp.value绑定到person.weight。

<script>
  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;
     //将person.weight绑定到inp.value
     inp.value = person.weight;
  }
  _render(ul);
  inp.oninput=function()
  {
     //将inp.value绑定到person.weight
     person.weight = inp.value;
     _render(ul);
  }
  function observe(obj)
  {
     for(let key in obj)
     {
        let value=obj[key]
        Object.defineProperty(obj,key,{
           get()
           {
              return value
           },
           set(newValue)
           {
              value=newValue
              _render(ul)
           }
        })
     }
  }
  observe(person)
</script>

总结：双向绑定指的是，其中任意一个改变都会影响到另外一个，其中input框可以使用input事件监听，而person可以使用Object.defineProperty方法监听。