其实这个问题很多文章都有写，也是面试的高频题目，这里仅仅是记录下本人的了解。

Proxy和Object.defineproperty的区别

  1. Object.defineProperty只能劫持对象的属性，对于嵌套的对象还须要进行深度的遍历；而Proxy是间接代理整个对象
  2. Object.defineProperty对新增的属性须要手动的Observe(应用$set);Proxy能够拦挡到对象新增的属性，数组的push、shift、splice也能拦挡到
  3. Proxy具备13种拦挡操作，这是defineProperty不具备的
  4. Proxy 兼容性差 IE浏览器不反对很多种Proxy的办法 目前还没有残缺的polyfill计划

defineProperty写法；

function defineReactive(data, key, value) {  Object.defineProperty(data, key, {    enumerable: true,    configurable: true,     get: function defineGet() {      console.log(`get key: ${key} value: ${value}`)      return value    },     set: function defineSet(newVal) {      console.log(`set key: ${key} value: ${newVal}`)      value = newVal    }  })}function observe(data) {  Object.keys(data).forEach(function(key) {    // 递归的getter setter    defineReactive(data, key, data[key])  })}

Proxy的写法：

let proxyObj = new Proxy(data, {    get(key) {        return data[key]    },    set(key, value) {        data[key] = value    }})

当然还有其余的属性，这里写最简略的。

这两个办法的区别让我想到了事件代理

<ul id="ul">    <li>111</li>    <li>222</li>    <li>333</li>    <li>444</li></ul>

如果没有应用事件代理，那么它会给ul下的每个li绑定事件,这样写有个问题就是，新增的li是没有事件的，事件没有一起增加进去。
如果是应用事件代理，那么新增加的子节点也会有事件响应，因为它是通过触发代理节点（父节点 冒泡）来触发事件的
十分相似，这里想要阐明的是：defineProperty是在自身本人的对象属性上做getter/setter, 而Proxy返回的是一个代理对象，只有批改代理对象才会产生响应式，如果批改原来的对象属性，并不会产生响应式更新.

Object.defineProperty对数组的解决

查阅vue的官网文档 咱们能看到:

Vue 不能检测以下数组的变动：

1、当你利用索引间接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2、当你批改数组的长度时，例如：vm.items.length = newLength

对于第一点：
有一些文章间接写

Object.defineProperty有一个缺点是无奈监听到数组的变动,导致间接通过数组的下标给数组设置值，不能实时响应

这种说法是谬误的，事实上Object.defineProperty是能够监听到数组下标的变动，只是在Vue的实现中，从性能/体验的性价比思考，放弃了这个个性.
对于数组下的索引是能够用getter/setter 的,

然而vue为什么没这么做？如果监听索引值，通过push或unshift增加进来的元素的索引还没被劫持，也不是响应式的，须要手动的进行observe，通过pop或shift删除元素，会删除并更新索引，也能触发响应式，然而数组常常会被遍历，会触发很屡次索引的getter 性能不是很好。

对于第二点：
MDN：

数组的 length 属性重定义是可能的，然而会受到个别的重定义限度。（length 属性初始为 non-configurable，non-enumerable 以及 writable。对于一个内容不变的数组，扭转其 length 属性的值或者使它变为 non-writable 是可能的。然而扭转其可枚举性和可配置性或者当它是 non-writable 时尝试扭转它的值或是可写性，这两者都是不容许的。）然而，并不是所有的浏览器都容许 Array.length 的重定义。

所以对于数组的length,无奈对它的拜访器属性进行get和set,所以没法进行响应式的更新.

这里留神下有两个概念：索引 和 下标
数组有下标，然而对应的下标可能没有索引值！

arr = [1,2]arr.length = 5arr[4] // empty 下标为4,值为empty,索引值不存在。 for..in 不会遍历出索引值不存在的元素

手动赋值length为一个更大的值，此时长度会更新，然而对应的索引不会被赋值，也就是对象的属性没有,defineProperty无奈解决对未知属性的监听，举个例子：length = 5的数组，未必索引就有4，这个索引(属性)不存在，就没法setter了。

数组的索引跟对象的键体现其实是统一的.

vue对数组进行了独自解决, 对其进行劫持重写,
看一个数组劫持的demo:

const arrayProto = Array.prototype// 以arrayProto为原型的空对象const arrayMethods = Object.create(arrayProto)const methodToPatch = ['push', 'splice']methodToPatch.forEach(function (method) {    const original = arrayProto[method]        def(arrayMethods, method, function mutator(...args) {        const result = original.apply(this, args)        console.log('劫持hh')        return result    })})function def(obj, key, val, enumerable) {    Object.defineProperty(obj, key, {        value: val,        enumerable: !!enumerable,        configurable: true,        writable: true    })}let arr = [1,2,3]arr.__proto__ = arrayMethodsarr.push(4)// 输入// 劫持hh// 4

咱们以数组为原型创立了一个空对象arrayMethods, 并在其下面定义了要劫持的数组，咱们这个只是简略的打印了一句。扭转arr的原型指向（给__proto__赋值），在arr操作push，splice时会走劫持的办法。 vue的数组劫持实际上是在劫持办法外面增加了响应式的逻辑.

function mutator(...args) {    // cache original method  const original = arrayProto[method]  // obj key, val, enumerable  def(arrayMethods, method, function mutator (...args) {    const result = original.apply(this, args)    const ob = this.__ob__    let inserted    switch (method) {      case 'push':      case 'unshift':        //eg: push(a) inserted = [a] // 为push的值增加Oberserve响应监听        inserted = args        break      case 'splice':        // eg: splice(start,deleteCount,...items)  inserted = [items] //  为新增加的值增加Oberserve响应监听        inserted = args.slice(2)        break    }    if (inserted) ob.observeArray(inserted)    // notify change    ob.dep.notify()    return result}
/** * Observe a list of Array items. */observeArray (items: Array<any>) {  for (let i = 0, l = items.length; i < l; i++) {    observe(items[i])  }}

$set 手动增加响应式 原理

对于对象新增属性/数组新增元素,无奈触发响应式，咱们能够用vue $set进行解决

vm.$set(obj,key,value)

对于数组还能应用splice办法：

vm.items.splice(indexOfItem, 1, newValue)

然而它们实质是一样的！

set的实现外围就是：

  1. 如果是数组，会应用splice对元素进行手动observe
  2. 如果是对象
    如果是批改存在的key,间接赋值就会触发响应式更新
    如果是新增的key, 就对key进行手动observe
  3. 如果不是响应式的对象（响应式对象有__ob__ 属性） 就间接赋值

set的外部实现:

export function set (target: Array<any> | Object, key: any, val: any): any {  // 如果 set 函数的第一个参数是 undefined 或 null 或者是原始类型值，那么在非生产环境下会打印正告信息  // 这个api原本就是给对象与数组应用的  if (process.env.NODE_ENV !== 'production' &&    (isUndef(target) || isPrimitive(target))  ) {    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)  }  if (Array.isArray(target) && isValidArrayIndex(key)) {    // 相似$vm.set(vm.$data.arr, 0, 3)    // 批改数组的长度, 防止索引>数组长度导致splcie()执行有误    target.length = Math.max(target.length, key)    // 利用数组的splice变异办法触发响应式, 这个后面讲过    target.splice(key, 1, val)    return val  }  // target为对象, key在target或者target.prototype上。  // 同时必须不能在 Object.prototype 上  // 间接批改即可, 有趣味能够看issue: https://github.com/vuejs/vue/issues/6845  if (key in target && !(key in Object.prototype)) {    target[key] = val    return val  }  // 以上都不成立, 即开始给target创立一个全新的属性  // 获取Observer实例  const ob = (target: any).__ob__  // Vue 实例对象领有 _isVue 属性, 即不容许给Vue 实例对象增加属性  // 也不容许Vue.set/$set 函数为根数据对象(vm.$data)增加属性  if (target._isVue || (ob && ob.vmCount)) {    process.env.NODE_ENV !== 'production' && warn(      'Avoid adding reactive properties to a Vue instance or its root $data ' +      'at runtime - declare it upfront in the data option.'    )    return val  }  // target自身就不是响应式数据, 间接赋值  if (!ob) {    target[key] = val    return val  }  // ---->进行响应式解决  defineReactive(ob.value, key, val)  ob.dep.notify()  return val}

参考：
https://www.zhihu.com/questio...
https://www.javascriptc.com/3...
https://juejin.cn/post/684490...