#vuejs双向绑定模拟实现

在vue的官方文档中,有这么一段话:

每个 Vue 实例都会代理其 data 对象里所有的属性:

      var data = { a: 1 }
	var vm = new Vue({
		data: data
	})
	vm.a === data.a // -> true
	// 设置属性也会影响到原始数据
	vm.a = 2
	data.a // -> 2
	// ... 反之亦然
	data.a = 3
	vm.a // -> 3

注意只有这些被代理的属性是响应的,也就是说值的任何改变都是触发视
图的重新渲染。如果在实例创建之后添加新的属性到实例上,它不会触发
视图更新。我们将在后面详细讨论响应系统。

也就是说,vm.a和data.a共享了一个值,vuejs称之为双向数据绑定。我们现在来实现简化版双向数据。

		var data = {a: 1};//原始数据

		var vm = {};

		vm.data = data;//对象按共享传递
		vm._data = {};//中介对象

		Object.defineProperty(vm, 'a', {//利用get,set修改两个对象
			get: function(){
				return vm._data.a;
			},

			set: function(val){
				vm.data.a= vm._data.a= val;
				value = val;
			}
		});

		Object.defineProperty(vm.data, 'a', {
			get: function(){
				return vm._data.a;
			},

			set: function(val){
				vm._data.a = val;
			}
		});
		vm.a = "嘿嘿嘿";
		console.log(data.a);//嘿嘿嘿
		data.a = "呵呵";
		console.log(vm.a);//呵呵

posted on 2017-07-21 16:16  breakair  阅读(190)  评论(0)    收藏  举报

导航