vue学习笔记--数据代理

清浅九天

已于 2022-03-02 15:42:20 修改

阅读量384

点赞数

分类专栏： vue 文章标签： vue.js 学习代理模式

于 2022-03-02 15:38:51 首次发布

本文链接：https://blog.csdn.net/aspxgod10/article/details/123230598

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.什么是数据代理？

2.vue数据代理:

1.什么是数据代理？

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

下面我们通过一个简单的例子来了解什么是数据代理：

1.我们定义了两个对象 obj 和 obj2

2.然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法

3.当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们

4.当我们修改obj2.x的值时候触发了set() 方法把我们修改的值拿到并赋值给了obj.x

5.现在就实现了最简单的数据代理不管我们如何操作obj2.x的值它都会始终和obj.x的值保持一致

let obj = {x:100}
let obj2 = {y:200}
 
Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
			obj.x = value
	}
})

2.vue数据代理:

vue数据代理：通过 vm 对象来代理 data 对象中属性的操作（读/写）。

好处：更方便的操作data中的数据

基本原理：
1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性描述
2). 所有添加的属性都包含get/set方法
3). 在get/set方法中去操作data中对应的属性

 <script>
    let number = 18
    let person = {
      name: '丽萨',
      sex: 'nv',
      //  age: 18
    }

    Object.defineProperty(person, 'age', {
      //  value: 18,
      //  enumerable: true, // 控制属性是否可以枚举（遍历），默认值false
      //  writable: true,   //控制属性是否可以被修改，默认值false
      //  configurable: true,  //控制属性是否可以被删除，默认值false

      //当有人读取 person 的age属性时，get函数(getter)就会被调用，且返回值就是age的值
      get() {
        return number
      },
      //当有人修改 person 的age属性时，set函数(setter)就会被调用，且会受到修改的值
      set(value) {
        number = value
      }

    })
  </script>

下面我们通代码来演示一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>名称：{{name}}</h2>
			<h2>地址：{{address}}</h2>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'张三',
				address:'山东菏泽曹县'
			}
		})
	</script>
</html>

1.我们通过new Vue() 得到了一个 vm 实例对象接下来我们打印 vm 实例对象

2.在实例对象中出现了 name 和 address 两个属性

3.在实例的最下面还有着两个属性的 set和get 方法

4.现在我们得知这两个属性是由Object.defineProperty()添加上去的

5.所以当我们通过vm读name的时候实际读的就是data中的name 当我们改的时候改的也是data中的name