es6數(shù)據(jù)如何變更同步到視圖層

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

數(shù)據(jù)變更同步到視圖層有一個(gè)很重要的東西就是Proxy,Proxy的作用就是可以隱藏真正的對(duì)象，而用戶去修改它的代理對(duì)象.Proxy可以監(jiān)聽數(shù)據(jù)的變化，例如

<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("數(shù)據(jù)改變了");
      render()
    }
  })
  data.name="Jack Chen"
</script>

可以監(jiān)控到data數(shù)據(jù)的改變,然后就可以將數(shù)據(jù)渲染到html中，就可以實(shí)現(xiàn)es6數(shù)據(jù)同步到視圖層

最終代碼

 <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("數(shù)據(jù)改變了");
      render();
    }
  })
  render();
  //數(shù)據(jù)渲染
  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數(shù)據(jù)如何變更同步到視圖層”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！