利用 ES6 Proxy 实现数据变更同步到视图层

作者：闭包旅人

时间：2026-10-22

本文介绍如何使用 ES6 的 Proxy 对象监听数据变化，从而实现数据变更到视图层的自动同步。通过定义 set 拦截器，在数据修改时触发渲染函数，结合模板字符串替换实现简单的视图更新逻辑。

文章目录

利用 ES6 Proxy 实现数据变更同步到视图层

将数据变更同步至视图层，核心依赖于 Proxy 对象。Proxy 的主要功能是隐藏真实对象，让用户操作其代理对象。通过 Proxy 可以监听数据的变化，例如：


<div id="test">
  name:{{name}}
  age:{{age}}
</div>
<script>
  let el = document.getElementById('test');
  let datainner = {
    name:"Jack",
    age:"18"
  }
  let template = el.innerHTML;
  let data = new Proxy(datainner,{
    set(obj,name,value){
      console.log(name+"的值被操纵成了value"+value)
      obj[name]=value;
      console.log("数据改变了");
      render()
    }
  })
  data.name="Jack Chen"
</script>

利用 ES6 Proxy 实现数据变更同步到视图层

它能够监控到 data 数据的改变，随后将数据渲染到 HTML 中，进而实现 ES6 数据与视图层的同步。

最终代码


 <script>
  let el = document.getElementById('test');
  let datainner = {
    name:"Jack",
    age:"18"
  }
  let template = el.innerHTML;
  let data = new Proxy(datainner,{
    set(obj,name,value){
      console.log(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);
      console.log(datainner[str]);
      return datainner[str]
    })
  }
</script>

最终效果

利用 ES6 Proxy 实现数据变更同步到视图层