MVVM实现过程（3）

最新推荐文章于 2025-03-05 16:31:26 发布

bugdemon8023

最新推荐文章于 2025-03-05 16:31:26 发布

阅读量448

点赞数

分类专栏：其他

本文链接：https://blog.youkuaiyun.com/smz8023/article/details/86644360

版权

其他专栏收录该内容

40 篇文章

订阅专栏

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 
来源：优快云 
原文：https://blog.youkuaiyun.com/smz8023/article/details/86631725 
版权声明：本文为博主原创文章，转载请附上博文链接！