目录
一、了解Object.defineProperty
值得一说的是,get函数和set函数不能与value、writable共同使用否则就会出现
property descriptors must not specify a value or be writable when a getter or setter has been specified
当指定了getter或setter时,属性描述符不能指定值或可写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后,全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
let number =18
let person ={
name:'张三',
sex:'男',
}
// 给哪个对象添加参数,添加的参数叫什么名,第三个参数是配资项,可以写很多的配置
Object.defineProperty(person,'age',{
// value:18,
// 但是我们这样添加的元素无法进行枚举或者遍历
// 为了我们新添加的age元素可以添加遍历,我们还需要一个配置
enumerable:true,
//除此之外,我们新添加的age属性在页面上无法修改,为了在页面上也可以修改,我们需要再进行配置
// writable:true,
configurable:true , //控制属性可以被删除
//当有人读取person的age属性时,get函数或者说getter就会被调用,且返回值就是age的值
get:function(){
console.log('有人读取了age属性')
return number
},
// 当有人修改person的age属性时,set函数或者说setter就会被调用,且会受到具体的值
set(value){
console.log('有人修改了age属性时,且值是',value)
number=value
}
})
console.log(Object.keys(person))
</script>
</body>
</html>
二、数据代理
1.定义
数据代理:通过一个对象代理对另一个对象中属性的操作(读或写)
下面这个小案例就是通过obj2来操作obj
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后,全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
let obj= { x:100 }
let obj2={ y:200 }
Object.defineProperty(obj2,'x',{
//当有人想获取obj2中的x属性时,我们把obj的y属性给他
get(){
return obj.x
},
// setter被调用时说明有人想修改obj2的x
// 当有人想修改obj2中x属性时,我们把obj中的x属性值给改掉就可以了
set(value){
obj.x=value
}
})
</script>
</body>
</html>
2.Vue中的数据代理
Vue中数据代理:
通过vm对象来代理data对象中属性的操作(读或写)
Vue中数据代理的好处:
更加方便的操作data中的数据
基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每个添加到vm上的属性都指定一个getter和setter
在getter/setter内部去操作(读或写)data中对应的属性
假设我们没有数据代理,我们在使用插值语句的时候使用了_data.xxxx这样就增加了代码量,也非常的不方便,故我们使用了上面的数据代理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后,全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1> {{_data.name}}</h1>
<h1> {{_data.address}}</h1>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'尚硅谷',
address:'洪福科技园'
}
})
</script>
</body>
</html>
因为vue中做了数据代理,我们可以直接使用下面的第二种写法,第一种写法比较麻烦