# 基础知识准备
# Object.defineProperty
Vue的响应式系统就是基于访问器描述符实现的
# 参数
Object.defineProperty(obj, prop, descriptor)
| 参数 | 说明 |
|---|---|
| obj | 定义的对象 |
| prop | 定义的对象的属性 |
| descriptor | 定义的对象的属性的描述符 |
# 返回值
定义的对象
# 描述符
描述符有两种：数据描述符和访问器描述符, 两者不能共存
# 描述符共有的属性设置
| 属性 | 说明 | 默认值 |
|---|---|---|
| enumerbale | 枚举属性 | false |
| configurable | 属性的描述符是否可被修改，属性是否可从对象上删除 | false |
# 数据描述符
| 属性 | 说明 | 默认值 |
|---|---|---|
| writable | 可写属性 | false |
| value | 该属性的值 | undefined |
# 访问器描述符
| 属性 | 说明 | 默认值 |
|---|---|---|
| get | 访问该属性的时候回调用该函数 | undefined |
| set | 设置该属性的时候会调用该函数 | undefined |
# 例子
<!DOCTYPE html>
<html lang="en">
<script>
console.log('--------------数据描述符-----------------');
const obj = {
name: 'xm'
}
Object.defineProperty(obj, 'name', {
enumerable: false,
writable: true,
configuable: true,
value: 'xh'
})
console.log('@@@obj', obj.name); // @@@ob xh
console.log('--------------访问器描述符-----------------');
const countObj = {
count: 1
}
function defineReactive(target, key, value) {
Object.defineProperty(target, key, {
get() {
console.log('countObj get', value) // countObj get 3
return value;
},
set(newValue) {
console.log('newVal', newValue); // 3
value = newValue;
}
})
}
defineReactive(countObj, 'count', 1);
countObj.count = 3;
countObj.count;
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41