Vue学习教程-04数据代理

文章目录

  • 一、什么是数据代理
  • 二、数据代理过程
  • 三、vue数据代理应用
    • 1.数据代理代码
    • 2.代理底层逻辑
  • 总结


一、什么是数据代理

数据代理是一种技术,通过代理、拦截对象属性及方法的访问请求,实现与该对象的交互。在Vue中,数据代理是指在Vue实例化一个组件时,Vue会将组件中的data属性中的数据转化为getter/setter,并将这些getter/setter注册到Vue的响应式系统中,在Vue实例中访问组件中的数据时,实际上是访问了这个getter/setter,它能统计出数据的依赖关系,并在数据变化时更新视图。

二、数据代理过程

  1. Vue中的数据代理:
    通过vm对象来代理data对象中属性的操作(读/写)
  2. Vue中数据代理的好处:
    更加方便的操作data中的数据
  3. 基本原理:
    通过Object.defineProperty()把data对象中所有属性添加到vm上。
    为每一个添加到vm上的属性,都指定一个getter/setter。
    在getter/setter内部去操作(读/写)data中对应的属性。

三、vue数据代理应用

1.数据代理代码

代码如下(示例):

<head>
	<meta charset="UTF-8" />
	<title>Vue中的数据代理title>
	
	<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(){//函数式声明data属性,之前使用的是对象式,为了组件化开发保持一致,后面使用函数式声明data
			return{
				name:'清华大学',
				address:'北京市海淀区清华园'
			}
			
		}
	})
script>

2.代理底层逻辑

我们并没有人为地去给name和address属性添加get和set函数,这都是Vue 使用了 Object.defineProperty() 给实例对象vm的 data 中定义的每个属性都添加 getter 和 setter。
Vue学习教程-04数据代理_第1张图片

!!!注意:在实例化 Vue 对象时,Vue 会将传入的 data 对象的属性都添加到实例的 _data 对象中,并实现数据代理,使得这些属性能够被实例直接访问。如果没有_data对象,那么我们在模版中使用Vue实例中的data属性时,必须要在属性名前面加上_data.,所以Vue大大简化了我们的工作。
比如当修改vm.name='北京大学’时候,vm实例的_data对象中name属性会进行自动修改。
Vue学习教程-04数据代理_第2张图片


总结

通过使用 Vue 框架的数据代理技术,我们可以实现简单、灵活、高效的数据绑定。

  1. 实现自动响应更新
    在 Vue 中,当 data 中的数据发生变化时,Vue 可以自动侦测到相应的依赖并且刷新绑定数据的页面,从而实现数据的响应式更新。

  2. 提高代码的可读性
    通过代理,Vue 可以将数据与页面的操作进行相互绑定,从而实现数据的自动更新,避免了手动监听和更新数据的繁琐操作,使得代码更加简洁易读。

  3. 实现数据与视图的双向绑定
    Vue 中的数据代理技术可以将数据与视图进行双向绑定,从而实现了数据的自动同步,使得数据的维护更加方便。

你可能感兴趣的:(vue.js,学习,javascript)