1. Object.defineProperty
可以通过Object.defineProperty动态定义属性和设置属性的值。其中设置属性的值可以通过value:18
设置,也可以通过getter和setter进行设置。具体的使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let number = 18
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age', {
// value:18,
// enumerable:true, //控制属性是否可以枚举,默认值是false
// writable:true, //控制属性是否可以被修改,默认值是false
// configurable:true, //控制属性是否可以用[delete person.age]删除,默认值是false
// 除了通过value:18静态设置age的值。还可以通过number动态get和set age属性的值
// 当有人调用[person.age]时,get函数(getter)就会被调用,且返回值就是age的值
get() {
return number
},
// 此时即使writable:false,也是可以修改number,即age的值
//当有人调用[person.age=19]时,set函数(setter)就会被调用,且set函数会返回修改后的值
set(value) {
number = value
}
})
</script>
</body>
</html>
2. 数据代理
通过一个对象代理对另一个对象中属性的读写操作。如下通过obj2代理obj1的x属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<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>
</body>
</html>
3. vue中的数据代理
通过vm对象来代理data对象中属性的读写操作
基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去读/写data中对应的属性
如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>名称:{{name}}</h2>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'jim'
}
})
</script>
</body>
</html>
在vm实例中,访问vm.name和vm._data.name是一样的。可以通过这两对data中的name属性进行读写