【Vue核心】6.数据代理

news2024/12/22 19:50:41

1.回顾Object.defineProperty方法

Object.defineproperty

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。Object.defineproperty方法需要传递3个参数，1.属性所在的对象 2.属性的名字 3.一个描述符对象。

Object.defineproperty（obj, prop, desc ）

参数1：obj 需要定义属性的当前对象
参数2：prop 当前需要定义的属性名
参数3：desc 描述符一般是一个对象

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

Object.defineproperty 定义属性

1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。

2.enumerable：表示能否通过for in循环访问属性，默认值为false

3.writable：表示能否修改属性的值。默认值为false。

4.value：包含这个属性的数据值。默认值为undefined。

5.最后还有最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)

get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined

set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined

get或set不是必须成对出现，任写其一就可以。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object.defineProperty</title>
	</head>
	<body></body>
	<script type="text/javascript">

		let age = 16;
		let student = {
			no:'sn001',
			name:'小明',
			//age:16		
		};	
		console.log(Object.keys(student))
		
		Object.defineProperty(student,'age',{
			/* value:16,
			enumerable:true,//控制属性是否可以枚举,默认值是false 
			writable:true, //控制属性是否可以被修改,默认值是false 
			configurable:true ,//控制属性是否可以被删除,默认值是false
			 */
			get() {
				console.log("读取了get");
				return age;
			},
			set(value) {
				console.log("修改了value："+value);
				age = value;
			}
		});
		console.log(Object.keys(student))
	</script>
</html>

效果图如下：

在这里插入图片描述

2.何为数据代理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据代理</title>
	</head>
	<body></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>
</html>

效果：

在这里插入图片描述

3.Vue中的数据代理

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作(读/写)

2.Vue中数据代理的好处:

更加方便的探作data中的数据

3,基本原理:

在这里插入图片描述

通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个漆加到vm上的属性,都指定一个getter/setter.
在getter/setter内部去操作(读/写) data中对应的属性。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object.defineProperty</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>name:{{name}}</h1>
		</div>
	</body>


	<script type="text/javascript">
		Vue.config.productionTip = false;
		/* 
			1.Vue中的数据代理:
				通过vm对象来代理data对象中属性的操作(读/写)
			2.Vue中数据代理的好处:
				更加方便的探作data中的数据
			3,基本原理:
				通过object.defineProperty()把data对象中所有属性添加到vm上。
				为每一个漆加到vm上的属性,都指定一个getter/setter.
				在getter/setter内部去操作(读/写) data中对应的属性。
		 */


		let data = {
			id: 1,
			name: "测试",

		}

		const vm = new Vue({
			el: '#root',
			data

		})
	</script>
</html>