记录简单实现Vue2中的响应式原理

Vue是数据驱动视图模式，数据变更后，会自动更新视图。

原生js中要更新视图通常是通过触发事件，然后修改数据，最后获取dom节点并且把数据更新到dom节点。

在Vue的开发中我们只用修改数据就可以达到视图更新的效果，这里Vue通过数据的监听帮助我们实现了视图的更新，这是Vue中的响应式。

所以要实现响应式的原理（简单实现~）要解决两个问题：

1、监听数据的变化。

2、数据发生变化时更新视图。

本文先解决第一个问题：如何监听数据的变化。

这里要用到 ES5 中的 Object.defineProperty() 方法。查询 MDN 可以看到该方法的作用会直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。其语法如下：

    Object.defineProperty(obj, prop, descriptor)

其中参数 obj 是要定义的对象（目标对象），prop 是要定义或修改的属性名称（key），descriptor 是属性描述符。

说一句题外话。Vue这里用到了ES5的Object.defineProperty()方法，也说明Vue不兼容IE8及其以下的浏览器。

这里重点是属性描述符，它是一个对象类型的数据，其包含很多属性，这里重点用到的是其 get 和 set 属性。

MDN 中关于 get 和 set 的解释如下：

get：属性的getter函数，当访问该属性时，会调用此函数，函数不接受参数，函数的返回值会被用作属性的值。默认为 undefined

通俗讲的意思就是，当调用对象中某个属性时，会触发该属性上的get方法，并且该getter的返回值会当做时该属性的值。




set：属性的setter函数，当属性值被修改时，会调用该方法，此方法接受一个参数，这个参数就是该属性被赋予的新值。默认为 undefined

意思就是当给对象中某个属性赋值时，会触发该属性的set方法，并且将赋予的新值作为参数传递

好了，看到这里应该大概有想法怎么去实现监听数据的变化了。因为属性被赋予新值时会触发该属性上的set方法，所有主要就是去重写属性的set方法，在set方法中调用视图更新。

直接上代码

// 定义数据
var data = {
  name: 'ABC',
  age: 18,
  friends: [1, 2, 3, 4],
  skill: {
    work: 15
  }
}

// 视图更新
const renderView = () => {
  console.log("******* 视图更新 *******", JSON.stringify(data));
}

// 数组类型的数据修改监听 -- 去修改其push\shift\pop等方法，在这些方法中实现视图的更新
const arrProto = Object.create(Array.prototype) // 备份数组原型，因为待会儿会修改数组数组其原型上的方法
const methodList = ['push', 'pop', 'shift']

methodList.forEach(method => {
  arrProto[method] = function () {
    console.log("method: ", method);
    Array.prototype[method].call(this, ...arguments)  // 例用Array原型原本的方法实现数据逻辑
    renderView()  // 实现视图的更新
  }
})

// 实现监听到数据变化的处理方法
const reactive = (obj, key, value) => {
  observer(value) // 迭代，监听对象数据
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newVal) {
      value = newVal
      console.log("***********key: ", key)
      renderView()
    }
  })
}

// 数据监听方法
const observer = (target) => {
  if (typeof target !== 'object' || target == 'null') {
    return target
  }

  // 数组处理
  if (Array.isArray(target)) {
    target.__proto__ = arrProto // 修改目标数组的原型指向
  } else {
      // 普通对象处理
    for (var key in target) {
      reactive(target, key, target[key])
    }
  }

}

observer(data)
// 手动修改数据，查看控制台打印
// data.age = 20
// data.skill.work = 20

data.friends.push(1)
// data.friends.unshift(1)  // unshift 没有写在methodList中，所以执行这句代码不会触发视图改变

需要说的是，列表类型的数据需要将将视图更新操作放到其原型上的方法中实现。总所周知，Vue 中数组数据是不会响应式更新数组下标赋值的，只有使用 push、pop 等数组方法才会更新视图。

    arr[1] = "A"    // 视图不更新
    arr.push("A" ) // 视图更新

所以对于列表类型的数据需要单独处理，具体操作是改变该数组的原型指向，重新实现其 push、pop 等方法，这些方法原本逻辑的实现依靠 JS 中数组原型 Array.prototype 中对应的方法实现，然后再添加视图更新操作即可。具体就是上面代码中的这个部分：

// 数组类型的数据修改监听 -- 去修改其push\shift\pop等方法，在这些方法中实现视图的更新
const arrProto = Object.create(Array.prototype) // 备份数组原型，因为待会儿会修改数组数组其原型上的方法
const methodList = ['push', 'pop', 'shift']

methodList.forEach(method => {
  arrProto[method] = function () {
    console.log("method: ", method);
    Array.prototype[method].call(this, ...arguments)  // 例用Array原型原本的方法实现数据逻辑
    renderView()  // 实现视图的更新
  }
})

注意，这里只在 methodList 中添加了 push、pop、shift 方法，所以上面代码也只能实现上面三个方法的响应式监听，正常的应该把所有的方法都写在 methodList 里。