1.vue2中的数据响应式原理
要想了解响应式原理就需要先了解vue中的数据劫持和数据代理
- 数据代理：data中的写入的数据都会通过加工再生成一份，组件实例对象vm._data中存储的就是data中的每个属性 get 和 set。然后name属性一改set就调，set的原理就是重新再解析模板，模板一解析就生成新的虚拟dom，然后新旧dom进行对比，然后更新页面 响应式原理
- 数据劫持：就是get和set每个数据身上都有一个get和set就是为了实现数据的响应式，getter 就是有人读取data中的属性就调用getter，进行数据劫持监视这个属性，set就是有人修改了_data中的数据然后就调用set
- vue2中data中定义得数组，并且没有键，那么他的_data中数据劫持是劫持不到的就是没有get 和 set ，你修改值是改变不了的，那么怎么解决，vue2中初始化的时候没有给数据，后续添加的都是没有get和set的，如果想拯救一下需要通过vue.set及另一个方法来解决，vue2对数组的push，pop，splice等等，进行了二次封装，使他重新调用解析模板...然后走页面更新流程
- 数据代理和数据劫持都离不开，object.definepropty
- 数据劫持就是getter和setter 如果有人改了data中的属性就会调用setter，收到了你要修改的数据，并且修改原来的数据，然后重新解析模板
2.vue3中的数据响应式原理
vue3中数据响应式原理，是通过ref和reactive来实现响应式数据的
vue3中的通过ref来实现响应式对象跟vue2中的响应式原理是一样的，ref适合存放一些基本数据类型，那么他就会通过object.definepropty来进行数据劫持实现响应式原理，你如果存放的是对象或数组这些复杂数据类型，那么他也能解决只不过是去让proxy来进行解决。
reactive数据响应式理解：
- 他是vue3中的数据响应式原理，和object.definepropty区别不是很大，只不过是get和set接收到的参数都是一整条数据而不是vue2中的单条数据，并且set比vue中的set多接收一个数据，proxy中修改和添加都是使用一个set，proxy中提供了删除的api。
- 最重要的是通过Reflect来修改源数据，这是和vue2中数据响应式最大的区别。
- vue3reactive中使用proxy响应式原理中的Reflect就是为了使你的代码更加健壮，如果传统的数据劫持编译中出现错误就会直接停止，不会再执行后面的代码，因为js是单线程，而Reflect就是为了解决这种情况，就算出现了错误也会执行下面的代码。操作源数据
确实挺苦涩。