vue2和vue3的响应式原理及区别

Vue2

vue是通过Object.defineProperty()实现数据劫持，相当于为数据绑定了set和get

对于对象和数组：

对象

对象：检测不到对象的属性变化
deep：可以检测到属性变化（对键值进行了遍历通过Object.defineProperty()劫持）
问题：检测不到属性的新增和删除
解决方案：
this.$ set(对象，属性，值)
this.$ delete

数组

问题：无法检测到通过下标的修改
解决：对数组的几个函数封装实现了对数组的监听，但只能使用那几个方法

vue3

ref与reactive

ref

定义一个响应式数据：
语法： const xx = ref(value)
创建一个包含响应式数据的引用对象，js操作时需要.value，模板中不需要 备注
基本数据类型：仍然依靠，Object.defineProperty()的get 和set ，
对象类型求助了reactive 生成了Proxy

reactive

定义一个对象类型的响应式数据 内里是proxy，
可以对数组的正常修改响应，
不需要.value