Vue的响应式原理

1. 数组响应式原理
2. 对象响应式原理

vue的响应式原理无非就是一个数组的响应式和对象的响应式

数组：

我们可以把vue理解成一个全新的对象

底层就是相当于把数组的实例化对象的__proto__指向这个空对象

然后让空对象的__proto__指向Array的prototype

七种方法为：push、pop、shift、unshift、splice、sort、reverse

然后重写了数组的7种方法，对原7种方法进行的覆盖，只要你去使用了数组的这7个方法vue底层就会检测并去判断，同时去更新渲染页面

  const arr = []  //相当于实例化一个数组
    const p = {}    //相当于vue这个对象
    arr.__proto__ = p   
    p.__proto__ = Array.prototype
    p.push = function (...args) {
      const res = Array.prototype.push.call(this, ...args)
      console.log('调用了push方法,进行响应式处理');
      return res
    }

---

对象：

主要是通过Object.defineProperty做了一个数据代理和数据劫持，

可以通过声明一个函数walk来，判断data数据是否为不是一个对象或者是null，

如果不满足这个条件，遍历这个对象，把这个对象，键、值传给defineReacttive

在defineReacttive中主要通过Object.defeneProperty来实现监听数据的读取和改变,

给每个属性添加setter和getter

在getter中通过dep收集依赖，并且return出读取的值

在setter中去开发依赖，调用notify通知遍历数组,通知所有的观察者去调用update方法去更新渲染页面

在模版编译的时候会去new watch观察者实例，比如使用差值表达式、使用v-model等等

并去进行深度递归，判断新值满不满足walk的判断条件

详细代码我通过压缩包上传了，各位可以免费下载查看

vue响应式原理详细代码，参考如下地址https://download.csdn.net/download/shmilynn_/87350145?spm=1001.2014.3001.5501