es6数据变更同步到视图层的方法

数据变更同步到视图层有一个很重要的东西就是代理，代理的作用就是可以隐藏真正的对象，而用户去修改它的代理对象。代理可以监听数据的变化，例如

div id=' test ' name : { { name } } age : { { age } }/div脚本让El=document。getelementbyid(' test ')；让datainner={ name:'Jack，age : ' 18 ' }让template=El。innerhtml让数据=新代理(datainner，{ set(obj，name，value){ console。日志(名称')的值被操纵成了value ' value)obj[name]=value；console.log('数据改变了');render() } })数据。名称='成龙'/脚本

可以监控到数据数据的改变，然后就可以将数据渲染到超文本标记语言中，就可以实现es6数据同步到视图层

最终代码

脚本让El=文档。getelementbyid(' test ')；让datainner={ name:'Jack，age : ' 18 ' }让template=El。innerhtml让数据=新代理(datainner，{ set(obj，name，value){ console。日志(名称')的值被操纵成了value)obj[name]=值；console.log('数据改变了');render()；} })render()；//数据渲染函数render(){ El。innerhtml=模板。替换(/\ { \ { w \ }\ }/g，str={ str=str.substring(2，str。长度-2)；控制台。日志(数据内部[str])；返回datainner[str] }) }/script最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。