响应式的基本原理

我们都知道数据变化了，要驱动页面更新、驱动一些ajax请求，吧啦吧啦一大堆要做的事情，那首先就是要监听数据的变化喽，那怎么监听的数据变化呢，也许很多人会想到，Object.defineProperty，恭喜你答对了，就是这个API，VUE的响应式系统就是基于这个API实现的，也许还有的人说是proxy,说这个就很nice了，这个是vue3中的实现，那么我们就看一看用代码怎么实现

function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    enumberable: false,
    configuralbe: true,
    get: function() {
      return value;
    },
    set: function(newVal) {
      obj[key] = newVal;
    }
  })
}

这个例子只是展示了对象的一个属性的设置，如果是多个属性，这样当然不行，要这样

function observe(data) {
  if (!data || typeof(data) !== 'object') return ;
  
	for(let key in data) {
    defineReactive(data, key, data[key])
  }
}

这里只是展示了多个属性的实现，如果是个多层的对象，这样当然也不行了，实际也简单，修改一下defineReactive函数

function defineReactive(obj, key, value) {
  observe(value)；
  Object.defineProperty(obj, key, {
    enumberable: false,
    configuralbe: true,
    get: function() {
      return value;
    },
    set: function(newVal) {
      obj[key] = newVal;
    }
  })
}