简单实现Vue

Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。

var data = { name: 'yck' }

observe(data)

let name = data.name // -> get value

data.name = 'yyy' // -> change value

 

function observe(obj) {

  // 判断类型

  if (!obj || typeof obj !== 'object') {

    return

  }

  Object.keys(obj).forEach(key => {

    defineReactive(obj, key, obj[key])

  })

}

 

function defineReactive(obj, key, val) {

  // 递归子属性

  observe(val)

  Object.defineProperty(obj, key, {

    // 可枚举

    enumerable: true,

    // 可配置

    configurable: true,

    // 自定义函数

    get: function reactiveGetter() {

      console.log('get value')

      return val

    },

    set: function reactiveSetter(newVal) {

      console.log('change value')

      val = newVal

    }

  })

}

以上代码简单的实现了如何监听数据的 set 和 get 的事件，但是仅仅如此是不够的，因为自定义的函数一开始是不会执行的。只有先执行了依赖收集，才能在属性更新的时候派发更新，所以接下来我们需要先触发依赖收集。