vue2和vue3响应式的理解及如何进行依赖收集

响应式数据：数据改变了，对应的视图也会改变；（数据流向视图）

1、vue2

对象： 通过Object.defineProperty（）对数据进行劫持，如果多层次就要递归

数组： vue2中没有使用Object.defineProperty( )对数组的每一项进行劫持，而是选择重写数组的方法。

如果数组中的元素是对象，也进行递归处理；
数组的索引和长度变化时无法监控的

2、vue3

采用proxy，如果是多层次的数据，用户不使用，就不会递归

3、依赖收集

data中每一个属性都有一个dep，用来存放我们所依赖的watcher，当属性变化后通知自己对应的watcher去更新；

默认在渲染的时候（获取这个响应数据），此时就会触发属性收集依赖dep.depend( )；

当属性发生改变时，就会触发watcher，通过dep.notify（）来实现依赖收集；

n个data属性·---->n个dep---->n个watcher

在页面上使用多少个响应式数据，就有多少个watcher