Vue2和Vue3的数据响应式机制有何显著差异，如何深入理解其长尾词原理？

本文共计5138个文字，预计阅读时间需要21分钟。

数据响应式+从一开始使用Vue+时，相较于之前的+jq+开发，一个很大的区别就是基本不用手动操作DOM，data+中声明的数据状态变化后，会自动重新渲染相关的DOM。

什么是数据响应式

从一开始使用 Vue 时，对于之前的 jq 开发而言，一个很大的区别就是基本不用手动操作 dom，data 中声明的数据状态改变后会自动重新渲染相关的 dom。
换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

因此实现数据响应式有两个重点问题：

1. 如何知道数据发生了变化？
2. 如何知道数据变化后哪里需要修改？

对于第一个问题，如何知道数据发生了变化，Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue3 中使用了 ES6 的 Proxy，都是对需要侦测的数据进行 变化侦测 ，添加 getter 和 setter ，这样就可以知道数据何时被读取和修改。

第二个问题，如何知道数据变化后哪里需要修改，Vue 对于每个数据都收集了与之相关的 依赖 ，这里的依赖其实就是一个对象，保存有该数据的旧值及数据变化后需要执行的函数。每个响应式的数据变化时会遍历通知其对应的每个依赖，依赖收到通知后会判断一下新旧值有没有发生变化，如果变化则执行回调函数响应数据变化（比如修改 dom）。

下面详细分别介绍 Vue2 及 Vue3 的数据变化侦测及依赖收集。