vue中数据劫持代理

1.vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名，而不用写成this.data.属性名
2.实现原理主要就是用到了Object.defineProperty（）方法，具体实现代码如下

<script type="text/javascript">
			//模拟组件data
			let data = {
				userName :'玄猫',
				year:18
			}
			//模拟组件实例
			let _this = {
				
			}
			for(let item in data){
				//利用object.defineProperty()
				Object.defineProperty(_this,item,{
					// 获取代理的item属性值时调用get方法
					get(){
						return data[item]
					},
					// 修改代理的item属性值时调用set方法
					set(newValue){
						// _this.item = newValue  不能这么写，要不会进入调用set的死循环
						data[item] = newValue
					}
				})
			}
			console.log(_this)
			// 没有set方法而直接修改时会修改不成功，因为不允许在_this上直接修改其代理的属性
			_this.userName = 'xs'
			console.log(_this.userName)
		</script>