JSFiddle - React, Tailwind, and code Playground

by ruirui

HTML

<div>
Vue 数据绑定（一）- ES5
</div>
<div>
请打开控制台查看结果
</div>

JavaScript

function Observer(data) {
  this.data = data;
  this.getset(data);
}

Observer.prototype.getset = function(data) {
  for(var key in data) {
    if(data.hasOwnProperty(key)) {
      var val = data[key];
      Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get: function () {
          console.log('你访问了' + key);
          return val;
        },
        set: function (newval) {
          console.log('你设置了' + val + ',新的值为' + newval);
          val = newval;
        }
      })
    }
  }
}

let app1 = new Observer({
  name: 'youngwind',
  age: 25
})
let app2 = new Observer({
  university: 'bupt',
  major: 'computer'
})
console.log(app1.data.name); // 你访问了name
console.log(app1.data.age = 100); // 你设置了25,新的值为100
console.log(app2.data.university); // 你访问了university
console.log(app2.data.major = 'science'); // 你设置了computer,新的值为science