VUE响应式原理-vue类

class Vue{

  constructor(options) {
    // 1 存储数据
    // 存储属性 如果没有传入参数，即当做eventBus来使用时，给options传入一个空对象
    this.$options = options || {}
    this.$data = options.data || {}
    // 判断el的值的类型，并进行存储
    const {el} = options
    this.$el = typeof el === "string" ? document.querySelector(el) : el 
    // 2 将data注入到vue实例中
    _proxyData(this, this.$data)
    // 3 创建observe实例，监听data的属性变化
    new Observer(this.$data)
  }
}

// 将data属性注入到vue实例， 进行函数封装
function _proxyData(target, data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(target, key, {
      enumerable: true,
      configurable: true,
      get() {
        return data[key]
      },
      set(newValue) {
        data[key] = newValue
      },
    })
  })
}