07-Vue核心-数据代理
回顾Object.defineproperty方法
Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
写法：Object.defineproperty(obj, prop, desc)
1) 第一个参数obj，在哪个对象身上添加或者修改属性
2) 第二个参数prop，添加或修改的属性名
3) 第三个参数desc，配置项
通过Object.defineproperty方法添加的新属性，默认是不可枚举的，也就是说对象中的该属性无法被遍历出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顾Object.defineproperty</title>
</head>
<body>
<script type="text/javascript">
// 声明对象类型变量
let person = {
name:"马铃薯",
sex:"男"
}
// Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(person,"age",{
value:26
})
console.log(person)
for(let index in person){
console.log("@",person[index])
}
</script>
</body>
</html>
通过修改enumerable、writable、configurable属性值，可以分别控制属性是否可以被枚举、被修改以及被删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顾Object.defineproperty</title>
</head>
<body>
<script type="text/javascript">
// 声明对象类型变量
let person = {
name:"马铃薯",
sex:"男"
}
// Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(person,"age",{
value:26,
// 控制属性是否可以枚举，默认值为false
enumerable:true,
// 控制属性是否可以被修改，默认值为false
writable:true,
// 控制属性是否可以被删除，默认值为false
configurable:true
})
console.log(person)
for(let index in person){
console.log("@",person[index])
}
</script>
</body>
</html>
声明一个数值类型变量number，通过Object.defineproperty方法获取和修改number值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顾Object.defineproperty</title>
</head>
<body>
<script type="text/javascript">
// 声明数值类型变量
let number = 100
// 声明对象类型变量
let person = {
name:"马铃薯",
sex:"男"
}
// Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(person,"age",{
// value:26,
// // 控制属性是否可以枚举，默认值为false
// enumerable:true,
// // 控制属性是否可以被修改，默认值为false
// writable:true,
// // 控制属性是否可以被删除，默认值为false
// configurable:true,
// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log("正在读取age属性")
return number
},
// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log("正在修改age属性，且值是",value)
number = value
}
})
console.log(person)
for(let index in person){
console.log("@",person[index])
}
</script>
</body>
</html>
数据代理
通过一个对象代理对另一个对象中属性的操作（读/写）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
<script type="text/javascript">
// 声明对象类型变量
let obj1 = {x:100}
let obj2 = {y:200}
// Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(obj2,"x",{
get(){
return obj1.x
},
set(value){
obj1.x = value
}
})
</script>
</body>
</html>
Vue中的数据代理
Vue中的数据代理通过 vm对象 来代理 data对象 中属性的操作（读/写）
Vue中数据代理的好处，是可以更加方便的操作data中的数据
Vue数据代理的基本原理
1) vm._data首先是从data对象里面获取的数据（注意，这里面还没有涉及到数据代理）
2) 但是我们操作属性时，一直使用_data.name和_data.address会显得很繁琐，因此这里通过Object.defineproperty方法把data对象里面的name和address属性添加到vm实例对象上，然后为每一个添加的属性指定get()和set()方法，在get()和set()内部去操作（读/写）data对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
//声明一个对象类型变量data,也就是
let data = {
name:"尚硅谷",
address:"宏福科技园"
}
const vm = new Vue({
el:"#root",
// data:{
// name:"尚硅谷",
// address:"宏福科技园"
// }
data
})
</script>
</body>
</html>
浙公网安备 33010602011771号