vue响应式原理学习

vue2和vue3的响应式有一点不同的。
vue 2：
当new一个vue实例时，vue会为每一个data使用Object.defineProperty定义getter和setter,每一个组件都会有一个watcher实例，watcher会收集getter为依赖，然后渲染每个组件形成虚拟DOM，当data数据修改后会触发setter，setter会通知Watcher，然后重新渲染与之有关的组件。

缺点：不能检测数组和对象的变化
对于对象：无法根据对象属性的变化重新渲染界面，此时需要使用this.$set(对象,属性名,值)方法
对于数组：无法利用索引直接设置一个数组项，可以使用$set方法
无法直接修改数组的长度，此时得使用：splice()方法
vue3：
vue3和vue2的响应式的区别是：vue3使用了proxy，而vue2使用的是defineProperty。
这样的好处是在vue2里的对象和数组里不能响应的问题就被解决了。
相对于vue2，vue3使用了新的api:ref,reactive