5. 数据代理-CSDN博客

本文链接：https://blog.csdn.net/Y_L_Wang/article/details/134851869

本文详细介绍了JavaScript中Object.defineProperty方法的作用，包括精确控制属性行为、动态绑定数据以及数据代理的应用实例。特别关注了在Vue框架中如何使用该方法实现属性代理以管理数据同步。

摘要由CSDN通过智能技术生成

Object.defineProperty 方法

作用：定义属性的元数据信息精确地控制属性的行为
用例1：

		<script>
			let person = {
				name:"www"
			}
			Object.defineProperty(person,'age',{
				value:18 ,// 属性值
				enumerable:true, // 控制属性是否可以被枚举，默认false,
				writable:true,//控制属性是否被修改,默认false
				configurable:true,// 控制属性是否可以被删除，默认false
 			})
		</script>

用例2 ：基于get/set 实现动态绑定数据

		<script>
			let age = 18
			let person = {
				name:"www"
			}
			Object.defineProperty(person,'age',{
				get(value){ // 当读取属性时，调用该函数
					return age;
				},
				set(value){ // 当修改属性时，调用该函数
					age=value;
				}
 			})
		</script>

此时对象的属性并不能直接可见，并且有对象的get和set方法

修改age 变量，person对象的属性实现了同步

数据代理

通过一个对象代理对另一个对象的属性的操作

		<script>
			obj={
				"x",1;
			}
			obj2={}
			Object.defineProperty(obj2,'x',{
				get(value){ 
					return obj.x;
				},
				set(value){ 
					obj.x=value;
				}
 			})
		</script>

用obj2代理obj ,通过读取/修改obj2.x来修改obj.x 。

Vue 中的属性代理

模拟实现

		<script>
			function MyVue(config){
				if(config.data){
					const data=config.data;
					this._data=data;
					for(key in data){
						Object.defineProperty(this,key,{
							get(){
								return data[key];
							},
							set(value){
								data[key]=value;
							}
						})
					}
				}
				
			}
			const vm = new MyVue({
				data:{
					name:"www"
				}
			})
		</script>