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里的数据代理可以让我们访问数据更加简单