深入浅出 Vue 系列 -- 数据劫持实现原理

function defineReactive (obj, key) {
 let val = obj[key]
 Object.defineProperty(obj, key, {
  get () {
   console.log(' === 收集依赖 === ')
   console.log(' 当前值为：' + val)
   return val
  },
  set (newValue) {
   console.log(' === 通知变更 === ')
   console.log(' 当前值为：' + newValue)
   val = newValue
  }
 })
}

const student = {
 name: 'xiaoming'
}

defineReactive(student, 'name') // 劫持 name 属性的读取和设置操作

 Object.keys(student).forEach(key => defineReactive(student, key))

const foo = {
 name: '123'
}
Object.getOwnPropertyDescriptor(foo, 'name') // { value: '123', writable: true, enumerable: true, configurable: true }

// 部分重复代码 这里就不再罗列了。
function defineReactive (obj, key) {
 // ...

 const desc = Object.getOwnPropertyDescriptor(obj, key)

 if (desc && desc.configurable === false) {
  return
 }

 // ...
}

// 部分重复代码 这里就不再罗列了
function defineReactive (obj, key) {
 let val = obj[key]

 //....

 // 默认 getter setter
 const getter = desc && desc.get
 const setter = desc && desc.set

 Object.defineProperty(obj, key, {
  get () {
   const value = getter "htmlcode">

function defineReactive (obj, key) {
 let val = obj[key]

 // ...

 // 递归处理其属性值
 const childObj = observe(val)

 // ...
}


递归循环引用对象很容易出现递归爆栈问题，对于这种情况，Vue 通过定义 ob 对象记录已经被设置过 getter 和 setter 方法的对象，从而避免递归爆栈的问题。


function isObject (val) {
 const type = val
 return val !== null && (type === 'object' || type === 'function')
}

function observe (value) {
 if (!isObject(value)) {
  return
 }

 let ob
 // 避免循环引用造成的递归爆栈问题
 if (value.hasOwnProperty('__ob__') && value.__obj__ instanceof Observer) {
  ob = value.__ob__
 } else if (Object.isExtensible(value)) {
  // 后续需要定义诸如 __ob__ 这样的属性，所以需要能够扩展
  ob = new Observer(value)
 }

 return ob
}




上述代码中提到了对象的可扩展性，在 JavaScript 中所有对象默认都是可扩展的，但同时也提供了相应的方法允许对象不可扩展：


const obj = { name: 'xiaoming' }
Object.preventExtensions(obj)
obj.age = 20
console.log(obj.age) // undefined


除了上述方法，还有前面提到的 Object.seal() 和 Object.freeze() 方法。
三、针对 Array 类型的劫持
数组是一种特殊的对象，其下标实际上就是对象的属性，所以理论上是可以采用 Object.defineProperty() 方法处理数组对象。
但是 Vue 并没有采用上述方法劫持数组对象，笔者猜测主要由于以下两点：（读者有更好的见解，欢迎留言。）
1、特殊的 length 属性
数组对象的 length 属性的描述符天生独特：


const arr = [1, 2, 3]

Object.getOwnPropertyDescriptor(arr, 'length').configurable // false


这就意味着无法通过 Object.defineProperty() 方法劫持 length 属性的读取和设置方法。
相比较对象的属性，数组下标变化地相对频繁，并且改变数组长度的方法也比较灵活，一旦数组的长度发生变化，那么在无法自动感知的情况下，开发者只能手动更新新增的数组下标，这可是一个很繁琐的工作。
2、数组的操作场景
数组主要的操作场景还是遍历，而对于每一个元素都挂载一个 get 和 set 方法，恐怕也是不小的性能负担。
3、数组方法的劫持
最终 Vue 选择劫持一些常用的数组操作方法，从而知晓数组的变化情况：




const methods = [
 'push',
 'pop',
 'shift',
 'unshift',
 'sort',
 'reverse',
 'splice'
]


数组方法的劫持涉及到原型相关的知识，首先数组实例大部分方法都是来源于 Array.prototype 对象。
但是这里不能直接篡改 Array.prototype 对象，这样会影响所有的数组实例，为了避免这种情况，需要采用原型继承得到一个新的原型对象：


const arrayProto = Array.prototype
const injackingPrototype = Object.create(arrayProto)


拿到新的原型对象之后，再重写这些常用的操作方法：


methods.forEach(method => {
 const originArrayMethod = arrayProto[method]
 injackingPrototype[method] = function (...args) {
  const result = originArrayMethod.apply(this, args)
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) {
   // 对于新增的元素，继续劫持
   // ob.observeArray(inserted)
  }
  // 通知变化
  return result
 }
})




最后，更新劫持数组实例的原型，在 ES6 之前，可以通过浏览器私有属性 proto 指定原型，之后，便可以采用如下方法：


Object.setPrototypeOf(arr, injackingPrototype)


顺便提一下，采用 Vue.set() 方法设置数组元素时，Vue 内部实际上是调用劫持后的 splice() 方法来触发更新。
四、总结
由上述内容可知，Vue 中的数据劫持分为两大部分：

  
针对 Object 类型，采用 Object.defineProperty() 方法劫持属性的读取和设置方法；
  
针对 Array 类型，采用原型相关的知识劫持常用的函数，从而知晓当前数组发生变化。

并且 Object.defineProperty() 方法存在以下缺陷：

  
每次只能设置一个具体的属性，导致需要遍历对象来设置属性，同时也导致了无法探测新增属性；
  
属性描述符 configurable 对其的影响是致命的。

而 ES6 中的 Proxy 可以完美的解决这些问题（目前兼容性是个大问题），这也是 Vue3.0 中的一个大动作，有兴趣的读者可以查阅相关的资料。
以上所述是小编给大家介绍的数据劫持实现原理详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！