MVVM实现过程（3）
为了更好的更方便的更改数据，我们可通过数据代理来完成这项操作！
思路：把所有的数据都绑定到，this上，我们只需要通过实例点语法即可更改添加数据 ，好处是我们只需要xx.a或者xx.b来更改数据，不需要xx.data.a或者xx.data.b 更或者xx.data.a.a。
<body>
<div id = 'app'>
</div>
</body>
<script>
let smz = new SMZ({
el:'#app',
data:{
a:1
}
})
function SMZ(options={}){
this.$options = ooptions;
var data = this._data = this.$options.data;
//监听说有数据data
oberver(data)
//这里是数据代理部分
for(let key in data){
let val = data[key];
//绑定到this上；
Object.defineproperty(this,key,{
enumerable:true,
get(){
//给this对象上绑定一个key，值为this._data[key],
//一旦调用this._data[key]就相当于获取值，就会触发observe的Object.defineproperty的get方法
return this._data[key]
},
set(newValue){
this._data[key] = newValue
}
)
}
}
function observer(data){
//判断data是否是object类型
if(typeof data !=='object ') return
return new Observer(data)
}
function Observer(data){
for( let key in data){
let value = data[key];
//如果对象包含对象，继续循环调用
observer(value);
Object.defineProperty(data,key,{
enumerable:true,//可枚举
//一旦有获取，就出发此函数！！！
get(){
return value;
},
set(newValue){
value = newValue;
//如果添加的值为对象，继续循环
observe(newValue);
}
})
}
}
</script>
---------------------
作者：smz8023
来源：CSDN
原文：https://blog.csdn.net/smz8023/article/details/86631725
版权声明：本文为博主原创文章，转载请附上博文链接！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
