es6數據如何變更同步到視圖層

小編給大家分享一下es6數據如何變更同步到視圖層，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

數據變更同步到視圖層有一個很重要的東西就是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>

可以監控到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數據如何變更同步到視圖層”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！