Vue2响应式原理浅析

defineProperty

Object.defineProperty() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
下面做一个简单的示例：

 const data = {}
 let name = '123'

 Object.defineProperty(data, 'name', {
   get: function() {
     return name
   },
   set: function(newValue) {
     console.log('set')
     name = newValue
     // 视图重新渲染
   }
 })

data.name = 234 // set
console.log(data.name) // 234

使用Object.defineProperty()在data上定义一个name属性，该属性有一个get和set方法，在访问该属性时（data.name）会触发get方法，在给该属性设置值的时候会（data.name = 234）触发set方法。通过这个两个方法就可以对data上的name属性进行监听，当该属性的值变化时，在set中将视图重新渲染。

响应式基本实现

以下只是简单的模仿，完整的响应式应该包括数据劫持、收集依赖、发布订阅。

    const data = {
      name: 'qwe',
      age: 20,
      info: {
        level: 10
      }
    }

    // 对data数据进行观测
    observer(data)

    // 数据观测函数
    function observer(target) {
      if (typeof target !== 'object' || target === null) {
        return target
      }

      for (let key in target) {
        defineReactive(target, key, target[key])
      }
    }

    // 将target中的每一个属性都设置为响应式
    function defineReactive(target, key, value) {
      // 如歌target为一个对象，就需要将该对象设置为响应式，相当于再调用一次observer
      observer(value)

      Object.defineProperty(target, key, {
        get() {
          return value
        },
        set(newValue) {
          // 在set的时候同样也需要对set的数据进行观测
          observer(newValue)
          if (newValue !== value) {
            value = newValue
            console.log('视图更新')
          }
        }
      })
    }

    // data.age = 21 // 视图更新

    // data.info.level = 1 // 视图更新

    // 视图更新 两个对象存储的地址不一样，所以也进行了更新
    data.info = { level: 10 }

    // 这里不会使得视图更新，Vue提供了Vue.delete API来实现
    delete data.age 

    // 同样直接向对象中添加一个属性也不会触发视图更新，Vue提供了Vue.set API
    data.sex = 'male'

上面只是考虑到对象的属性为对象或者原始值的情况，属性还有数组的情况，直接使用数组原生的API来实现push、pop等操作并没有更新视图的操作，所以需要在原本的操作上添加更新视图的操作。

    const data = {
      name: 'qwe',
      age: 20,
      info: {
        level: 10
      },
      arr: ['123']
    }

    // 将数组的原型取出来，目的是获得数组的方法
    const oldArrayProto = Array.prototype

    // 这里新创建一个对象，并且它的__proto__指向Array.prototype
    // 这样newArrayProto就拥有数组的全部方法
    const newArrayProto = Object.create(oldArrayProto)

    const arrMethods = ['push', 'pop', 'shift', 'unshift']
    
    arrMethods.forEach(methodName => {
      // 这里就需要重写数组的这几个方法，
      // 让这些方法不仅能执行原本的功能，而且还能够更新视图
      newArrayProto[methodName] = function() {
        oldArrayProto[methodName].call(this, ...arguments)
        console.log('更新视图')
      }
    })

    // 对data数据进行观测
    observer(data)

    // 数据观测函数
    function observer(target) {
      if (typeof target !== 'object' || target === null) {
        return target
      }

      // 修改数组的原型，重写方法
      if (Array.isArray(target)) {
        target.__proto__ = newArrayProto
      }

      for (let key in target) {
        defineReactive(target, key, target[key])
      }
    }

    // 将target中的每一个属性都设置为响应式
    function defineReactive(target, key, value) {
      // 如歌target为一个对象，就需要将该对象设置为响应式，相当于再调用一次observer
      observer(value)

      Object.defineProperty(target, key, {
        get() {
          return value
        },
        set(newValue) {
          // 在set的时候同样也需要对set的数据进行观测
          observer(newValue)
          if (newValue !== value) {
            value = newValue
            console.log('视图更新')
          }
        }
      })
    }

    // data.age = 21 // 视图更新

    // data.info.level = 1 // 视图更新

    // 视图更新 两个对象存储的地址不一样，所以也进行了更新
    // data.info = { level: 10 }

    // 这里不会使得视图更新，Vue提供了Vue.delete API来实现
    // delete data.age 

    // 同样直接向对象中添加一个属性也不会触发视图更新，Vue提供了Vue.set API
    // data.sex = 'male'

    data.arr.push('123445') // 更新视图