vue双向绑定原理
let obj = {
_hello:""
};
Object.defineProperty(obj,'hello',{
get() {
return this._hello;
},
set(value) {
this._hello = value;
$(".p1").text(value);
$("#txt1").val(value)
}
});
$("#txt1").bind('input propertychange',function () {
obj.hello = $(this).val();
})
$("#btn1").click(function () {
obj.hello = "哈哈哈"
})
注意:Object.defineProperty里面的属性名不能与原对象属性名一致,Object.defineProperty只能劫持新的属性
vue 双向绑定具体流程:
- 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
- 实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
- 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。