前言

技术栈是 Vue 的同学，在面试中难免会被问到 Vue2 和 Vue3 的相关知识点的实现原理和比较，面试官是步步紧逼，一环扣一环。

Vue2 的数据响应式原理是怎么样的？

Vue3 的数据响应式原理又是怎么样的？

Vue2 中是怎么监测数组的变化的？

Vue3 中又是怎么监测数组的变化的？

在问完你 Vue2 的数组的响应式原理之后，接着可能会补上一句，为什么要通过重写数组原型的 7 个方法来对数组进行监测？是因为 defineProperty 真的不能监测数组变化吗？Vue3 真的只使用 Proxy 就可以实现对数组的代理了吗？还需要进行什么设置呢？

一、vue2 的实现原理：

• 对象类型：通过 Object.defineProperty() 对属性的读取，修改进行拦截（数据劫持）。

• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

  Object.defineProperty(data, 'count', {
      get() {},
      set() {}
  })