【Vue核心】6.数据代理
1.回顾Object.defineProperty方法
Object.defineproperty
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。Object.defineproperty方法需要传递3个参数，1.属性所在的对象 2.属性的名字 3.一个描述符对象。
Object.defineproperty（obj, prop, desc ）
- 参数1：obj 需要定义属性的当前对象
- 参数2：prop 当前需要定义的属性名
- 参数3：desc 描述符 一般是一个对象
一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。
Object.defineproperty 定义属性
1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
2.enumerable：表示能否通过for in循环访问属性，默认值为false
3.writable：表示能否修改属性的值。默认值为false。
4.value：包含这个属性的数据值。默认值为undefined。
5.最后还有最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？
注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)
get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined
set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined
get或set不是必须成对出现，任写其一就可以。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object.defineProperty</title>
</head>
<body></body>
<script type="text/javascript">
let age = 16;
let student = {
no:'sn001',
name:'小明',
//age:16
};
console.log(Object.keys(student))
Object.defineProperty(student,'age',{
/* value:16,
enumerable:true,//控制属性是否可以枚举,默认值是false
writable:true, //控制属性是否可以被修改,默认值是false
configurable:true ,//控制属性是否可以被删除,默认值是false
*/
get() {
console.log("读取了get");
return age;
},
set(value) {
console.log("修改了value："+value);
age = value;
}
});
console.log(Object.keys(student))
</script>
</html>
效果图如下：
2.何为数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据代理</title>
</head>
<body></body>
<script type="text/javascript">
//数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
let obj = {
x: 100
};
let obj2 = {
y: 200
};
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</html>
效果：
3.Vue中的数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的探作data中的数据
3,基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个漆加到vm上的属性,都指定一个getter/setter.
在getter/setter内部去操作(读/写) data中对应的属性。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object.defineProperty</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>name:{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
/*
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的探作data中的数据
3,基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个漆加到vm上的属性,都指定一个getter/setter.
在getter/setter内部去操作(读/写) data中对应的属性。
*/
let data = {
id: 1,
name: "测试",
}
const vm = new Vue({
el: '#root',
data
})
</script>
</html>
效果：
