前端框架Vue----数据代理

数据代理定义

通过一个对象代理，去操作另一个对象的属性（读、写）。

使用Object.defineProperty：

<script type="text/javascript">
	let a = {name: 'jack', age: 29}
	let b = {name: 'tom'}

	//b中没有age属性，定义代理a的age属性
	Object.defineProperty(b, 'age', {
		get(){
			return a.age
		},
		set(v){
			a.age = v
		}
	})
	
	console.log(b.age)
	b.age = 30
	console.log(a.age)
</script>

Vue实例的数据代理

<script type="text/javascript">
	const vm = new Vue({
		el: "#test",
		data: {
			name: "jack",
			age: 18,
		}
	})

</script>

这里data所有的属性都会通过Object.defineProperty放到vm身上，data对象本身则赋值给vm._data; vm身上的所有属性及原型中的属性都可以在模板中使用。
vm.name & vm.age 都是操作的data对象的属性，
vm.name ---->getter----->data.name
vm.name=‘tom’ ----->setter---->data.name=‘tom’