#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);//呵呵
浙公网安备 33010602011771号