因为ES的Proxy API是为引⽤数据类型服务的，它⽆法为基本数据类型提供代理。如果强⾏代理，Vue会有提⽰：value cannot be made reactive: 30。
那么为什么Vue2的defineproperty并没有区分基本数据类型和引⽤数据类型呢？
因为defineproperty就是Object的静态⽅法，它只是为对象服务的，甚⾄⽆法对数组服务，因此Vue 2弄了⼀个data根对象来存放基本数据类型，这样⽆论什么类型，都是根对象的property，所以也就能代理基本数据类型。⽽Proxy能对所有引⽤类型代理，Vue 3也不再⽤data根对象，⽽是⼀个个的变量，所以带来了新问题，如何代理基本数据类型呢？并没有原⽣办法，只能构建⼀个{value: Proxy Object}结构的对象，这样Proxy也就能代理了。
问题来了，同样是响应式结构，ref跟reactive的区别是什么？
ref与reactive的区别
对⽐ref reactive
返回数据类型RefImpl对象（也叫ref对象）Proxy对象
传⼊基本类型返回{value: 基本类型}禁⽌这么做
传⼊引⽤类型返回{value: Proxy对象}Proxy对象
两者分别适⽤场合：
1. ref可以为基本类型添加响应式，也可以为引⽤类型添加响应式，reactive只能为引⽤类型添加响应式。
2. 对于引⽤类型，什么时候⽤ref，什么时候⽤reactive？简单说，如果你只打算修改引⽤类型的⼀个属性，那么推荐⽤reactive，如果你打算变
量重赋值，那么⼀定要⽤ref。具体见下⽂。
使⽤组合式API的话，请⼀定了解“重赋值⾃⾝”和“重赋值⾃⾝属性”的区别
vuejson转对象这⼀点⾮常重要。先看配置项式API中重赋值Proxy的范例，跟Vue 2没有区别，页⾯会渲染出[ { "name": "赵六", "age": 21 } ]字符：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。