Vue的数据代理的原理是十分重要的,它的学习对我们了解Vue的底层工作原理以及学习Vue具有举足轻重的作用,掌握了数据代理的原理,我们便可以由浅入深,再去学习Vue的响应式原理;因此本篇文章我将带领大家详细的了解Vue实现数据代理的核心----Object.defineProperty();
首先在讲解Vue数据代理的原理之前,我们应该知道什么是数据代理;数据代理的定义是:一个对象操作(读写)另一个对象中的属性和方法。定义比较抽象我们可能难以理解,下面我将结合实例向大家讲述什么是数据代理,实例代码如下:
// 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
},
})
从以上代码上可以看出实现数据代理的核心是使用Object.defineProperty()方法,当访问obj2上的x属性时,就会调用get方法读取obj的属性,当我们修改了obj2上x属性时,就会调用set方法,并且传入修改的值value值,将obj的x属性改为value;以上我们相当与通过obj2对象操作了obj对象中的x属性,这样便定义中所说的一个对象代理了另一个对象中的属性的操作;
详细大家通过上一节的学习,已经了解了什么是数据代理,下面我将结合下面实例带大家来看看Vue中的数据代理;代码示例如下:
<body>
<!--
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
let data = {
name: 'xizhutao',
address: '中国',
}
const vm = new Vue({
el: '#root',
data,
})
</script>
从数据代理的定义上说是一个对象代理了另一个对象的读写操作,因此我们首先要找到Vue中的两个对象,其次是哪个对象代理了哪个对象的操作;如下图所示我们在new Vue()时产生了一个vm实例对象,传入的参数内部又有一个data对象;
那么以上两个对象是谁代理谁呢,下面通过控制面板演示是vm实例对象代理了data对象;首先在控制面板执行以下代码修改vm实例对象上的name和address属性;
执行完以上代码后我们打开vue的调试面板,发现data上定义的属性确实变成了我们在vm实例上修改的值;即我们通过修改vm实例对象上的属性,实现了修改data对象的属性,即实现了数据代理,这就是Vue中的数据代理;
(❁´◡`❁)您的点赞➕评论➕收藏⭐是作者创作的最大动力