vue数据双向绑定的原理-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1039 天，文章内容可能已经过时。

Object.defineProperty方法
vue数据双向绑定原理

Object.defineProperty方法

Object.defineProperty接收3个参数：

属性所在的对象
属性名称
属性描述符对象

什么是属性描述符对象？

configurable：默认值为true，表示属性是否可被配置，例如是否可以通过delete删除属性

const obj = {
	a: 1,
};
Object.defineProperty(obj, "a", {
	configurable: false,
});
console.log(obj); // {a: 1}
delete obj.a;
console.log(obj); // {a: 1}

1
2
3
4
5
6
7
8
9

可以看到对象obj中的a属性没有被删除
2. enumerable：默认值为true，表示是否可枚举

const obj = {
	a: 1,
	b: 2,
};
Object.defineProperty(obj, "a", {
	enumerable: false,
});
for (let i in obj) {
	console.log(i); // b
}
console.log(Object.keys(obj)); // ['b']
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']

1
2
3
4
5
6
7
8
9
10
11
12

可以看到枚举的方法中不会返回a属性（Object.getOwnPropertyNames()会返回自有属性的名称，不管是不是可枚举的）
3. writable：默认值为true，表示是否可写

const obj = {
	a: 1,
};
Object.defineProperty(obj, "a", {
	writable: false,
});
console.log(obj); // {a: 1}
obj.a = 10;
console.log(obj); // {a: 1}

1
2
3
4
5
6
7
8
9

writable设置为false表示只读，可以看到设置a属性等于10，结果a属性还是等于1
4. value：默认值为undefined，表示属性的值

const obj = {
	a: 1,
};
Object.defineProperty(obj, "a", {
	writable: false,
	value: 20
});
console.log(obj); // {a: 20}
obj.a = 10;
console.log(obj); // {a: 20}

1
2
3
4
5
6
7
8
9
10

设置了value值之后，a属性的值就会变成value的值

Object.defineProperty的第三个参数除了是属性描述符对象，还可以是访问器属性

const obj = {
	a: 1,
	b: 2,
};
Object.defineProperty(obj, "a", {
	get() {
		return 1234;
	},
});
console.log(obj.a); // 1234

1
2
3
4
5
6
7
8
9
10

const obj = {
	_age: 20,
};
Object.defineProperty(obj, "age", {
	get() {
		return this._age;
	},
	set(newAge) {
		this._age = newAge + 1;
	},
});
obj.age = 30;
console.log(obj.age); // 31

1
2
3
4
5
6
7
8
9
10
11
12
13

get方法用于返回想要的值，而set方法用于计算正确的值

使用Object.defineProperties还可以定义多个属性

const obj = {
	a: 20,
};
Object.defineProperties(obj, {
	a: {
		writable: false,
		value: 21,
	},
	b: {
		enumerable: false,
		value: 22,
	},
	c: {
		configurable: false,
		value: 23,
	},
	d: {
		get() {
			return this._d;
		},
		set(newValue) {
			this._d = newValue + 1;
		},
	},
});
obj.d = 31;
console.log(obj.d); // 32
console.log(obj); // {a: 21, _d: 32, b: 22, c: 23}

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

vue数据双向绑定原理

const input = document.querySelector("input");
const p = document.querySelector("p");
const data = {
	_msg: "Hello World",
};
input.value = data._msg;
p.innerHTML = data._msg;
input.addEventListener("input", () => {
	data.msg = input.value;
});
Object.defineProperty(data, "msg", {
	get() {
		return data._msg;
	},
	set(value) {
		data._msg = value;
		input.value = data._msg;
		p.innerHTML = data._msg;
	},
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在数据改变的同时，通过Object.defineProperty中的访问器属性set去改变视图