1、简介
这章有点长，希望大家可以耐心看完。在了解数据代理之前需要先了解Object.defineProperty,Object.defineProperty就是给一个对象添加属性用的。数据代理，通过一个对象代理对另一个对象中数据的操作（读/写）。
Vue中的数据代理：
通过vm对象来代理data对象中的数下的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中的所有属性添加到vm上。
为每一个添加到vm上的属性，都制定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、数据代理
1. Object.defineProperty
在vscode中创一个新目录，叫“05数据代理”，在下面创建一个“1回顾Object.defineProperty方法.html”文件，在里面输入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let person = {
name:'张三',
sex:"男",
age:18
}
console.log(person)
</script>
</body>
</html>
使用let定义了一个对象叫person里面有name、sex、age三个属性
不可枚举方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let person = {
name:'张三',
sex:"男",
// age:18
}
Object.defineProperty(person,'age',{
value:18
})
console.log(person)
</script>
</body>
</html>
使用Object.defineProperty时传入了一个对象person，并设置了一个属性age，值为18
在代码中加入console.log(Object.keys(person))，可以看出是否可遍历，可以看出只有2个属性
Object.defineProperty的三个配置
object.defineProperty默认是不可修改、不可枚举、不可被删除的
object.defineProperty有三个配置可以控制修改、枚举和删除
enumerable:true, // 控制属性是否可以枚举，默认false
writable:true, // 控制属性是否可以被修改，默认false
configurable:true //控制属性是否可以被删除
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let person = {
name:'张三',
sex:"男",
// age:18
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true, // 控制属性是否可以枚举，默认false
writable:true, // 控制属性是否可以被修改，默认false
configurable:true //控制属性是否可以被删除
})
console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
get和set方法
Get方法可以用来读取变量的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let number = 10
let person = {
name:'张三',
sex:"男",
// age:18
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, // 控制属性是否可以枚举，默认false
// writable:true, // 控制属性是否可以被修改，默认false
// configurable:true //控制属性是否可以被删除
// 当有人读取person.age属性时，get函数就会被调用，且返回值就是age的值
get:function(){
console.log('游人读取age属性了')
return number
}
})
console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
定义了一个number的值为10，通过get和age绑定
Set方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let number = 10
let person = {
name:'张三',
sex:"男",
// age:18
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, // 控制属性是否可以枚举，默认false
// writable:true, // 控制属性是否可以被修改，默认false
// configurable:true //控制属性是否可以被删除
// 当有人读取person.age属性时，get函数就会被调用，且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
},
// 当有人修改person的age属性时，set属性(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人设置age属性')
number = value
}
})
console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
根据结果我们可以看出有了set方法，我就就算不设置writable属性值也是可以被修改的
2. 什么是数据代理
obj2对象本身没有x属性，通过Object.defineProperty追加一个x属性，值获取另一个对象的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 通过一个对象代理对另一个对象中属性的操作 -->
<script type="text/javascript">
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obe.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
3. Vue中的数据代理
在“05数据代理”目录下，在下面创建一个“3Vue中的数据代理.html”文件，在里面输入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学校名称:{{name}}</h2>
<h2>学校西地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"Mr. Li",
address:"北京朝阳"
}
})
</script>
</html>
Vue也是通过Object.defineProperty实现的数据关联，在Vue中设置的数下，都会有一个getter一个setter用来设置和获取属性的值
3、小结
掌握Object.defineProperty中set和get方法
4、过程中遇到的错误及解决办法
该问题时因为get方法中obj写成了obb
标签：教程,console,之超,age,Object,person,Vue2,defineProperty,属性 From： https://www.cnblogs.com/lirongyang/p/17233616.html