Object.defineProperty()&数据代理&Vue中的数据代理原理

最新推荐文章于 2022-08-11 11:42:05 发布

墨明棋妙Mi

最新推荐文章于 2022-08-11 11:42:05 发布

阅读量141

点赞数

文章标签： html html5 vue.js

本文链接：https://blog.csdn.net/z1216108894/article/details/120606980

版权

let number 18;
let person = {
    name: '张三',
    sex: '男'，
    age: number;
}
number = 19
console.log(person)

在没有数据代理的时候，上面代码输出的person对象的age依旧是18。那如何实现改变number的值后person跟着变化呢？这就要说到数据代理了。

先了解一个方法，Object.defineProperty()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let number = 18;
			let person = {
			    name: '张三',
			    sex: '男',
			}
			
			
			Object.defineProperty(person,'age',{   //给person对象追加属性age
			    // value:,       //设置属性的值
			    //enumerable: true,   //允许被枚举，默认false
			    //writable:true,    //允许被修改，默认false
			    //configurable:ture  //允许被删除，默认false 
			    
			    get:function(){   //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
			        return number;
			    }, 
			    set: function(value){ //当有人修改person的age属性时，set函数（setter）就会被调用，且返回值就是修改的具体值
			        number = value
			    }
			})  
			
			number = 19
			console.log(person)
		</script>
	</body>
</html>

这种添加属性的方法，输出person对象后是这样的（如左下图）。age属性并没有直接显示，而是当我们点击它后才去读取它的值，会调用getter然后返回结果显示出来。这样当我之后修改了number后，打印出person对象中的age值也跟着改变（右下图）

//数据代理：一个对象对另一个对象进行数据操作

//简单的数据代理示例，obj2对obj属性的读取和修改
//当访问obj2.x可以读取到obj.x的值
//当修改obj2.x可以修改obj.x的值
<script type="text/javascript">
    let obj = {x:100}
    let obj2 ={y :2oo}
    0bject.defineProperty(obj2,'x",{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
</script>

Vue中的数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h2>学校名称:{{name}}</h2>
			<h2>学校地址: {{address}}</h2>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
			const vm = new Vue({
				el: "#root",
				data:{
					name:"墨明奇妙",
					address: "广东"
				}
			})
		</script>

	</body>
</html>

可以知道address和name是利用0bject.defineProperty()加上去的，点击读取name和address的时候是读取Vue示例的data里的name和address。这就是用的数据代理。（修改vm的 name或address会修改data里的name和address）

（vm._data能直接访问data里的数据，而vm.name就是利用getting来获取到vm._data.name）

vm里的数据代理可以让我们访问数据更加简单

墨明棋妙Mi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Object.defineProperty()&数据代理&Vue中的数据代理原理

let number 18;let person = { name: '张三', sex: '男'， age: number;}number = 19console.log(person)在没有数据代理的时候，上面代码输出的person对象的age依旧是18。那如何实现改变number的值后person跟着变化呢？这就要说到数据代理了。先了解一个方法，Object.defineProperty()<!DOCTYPE html><html&g.
复制链接

扫一扫