双向绑定的思路

我先来个我的土法双向绑定

1
2
3
4
5
6
7
8
let obj = Object.create(null); //正好学完了原型和原型链我拿来玩玩
let odiv1 = document.getElementsByClassName("div1")[0];
let odiv2 = document.getElementsByClassName("div2")[0];
document.addEventListener("keyup", function (e) {
  obj.hello = e.target.value;
  odiv1.value = obj.hello;
  odiv2.value = obj.hello;
});

在页面上测试成了！
但是！如果要是修改 obj.hello 还是不会变化的,因为它是伪双向绑定，数据的赋值需要靠 keyup 事件来出发。

但是这个均发生了变化！

1
2
3
4
5
6
7
8
9
10
11
12
13
let obj = {};
obj.hello = "";
let odiv1 = document.getElementsByClassName("div1")[0];
let odiv2 = document.getElementsByClassName("div2")[0];
Object.defineProperty(obj, "hello", {
  set: function (v) {
    odiv1.value = v;
    odiv2.value = v;
  },
});
document.addEventListener("keyup", function (e) {
  obj.hello = e.target.value;
});