Vue中的数据代理

最新推荐文章于 2024-10-18 15:58:53 发布

白的夜gxw

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量296

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63228975/article/details/127683754

版权

Vue 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Vue中的数据代理是什么？

首先什么是数据代理？

let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
	obj.x = value
	}
})

Obj2中没有属性x,而Obj对象中有属性x,但是可以通过操作obj2来获取到x的值以及改变x的值，这是不是很神奇呢？这一切的功劳都是因为使用了Object.defineProperty这个API下的getter和setter这俩个方法。这便是数据代理

Vue 中是如何实现数据代理的呢？

<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>

这段代码相信大家并不陌生，这就是最简单的vue的一个入门模板，但是这里存在数据代理，且听博主慢慢道来。。。当你完成以上代码时，vue都经历了哪些呢？

经历的过程：

用户将数据写到Vue配置项options下data中。
Vue将data中的数据进行数据劫持，将其拷贝至Vue对象实例下的_data下
此时vm没有name.adddress这些属性，要想在模板中使用他们，只能通过 __data.name或__data.address来获取
Vue为_data中的数据做数据代理，在vm实例下添加name,address属性。当有人获取name/address值时，调用getter

方法，获取_data中的name数据，当有人修改name/address中的数据时，调用setter方法，获取修改的值并重新复制给_data中的数据
此时，vm实例有name/address属性，可以直接使用vm.name，而不需要使用_data.name.