Vue3.0中的reactive blog.csdn.net/weixin_4428…
- reactive 是 Vue3 中提供的实现响应式数据的方法。
- 在 Vue2 中响应式数据是通过 defineProperty 来实现的，
- 在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。
- reactive 参数必须是对象 (json / arr)
- 如果给 reactive 传递了其它对象
- 默认情况下，修改对象无法实现界面的数据绑定更新。
- 如果需要更新，需要进行重新赋值。(即不允许直接操作数据，需要放个新的数据来替代原数据)
在 reactive 使用基本类型参数
基本类型(数字、字符串、布尔值)在 reactive 中无法被创建成 proxy 对象，也就无法实现监听。而输出的值确实发生了变化，只不过这种变化并没有反馈到界面上，也就是说并没有实现双向数据绑定。当然，如果是 ref 的话，就不存在这样的问题。而如果要使用 reactive ，我们需要将参数从 基本类型 转化为 对象。
响应式代理 vs. 原始对象
值得注意的是，reactive() 返回的是一个源对象的 Proxy，它和源对象是不相等的：
const raw = {}
const proxy = reactive(raw)
// 代理和原始对象不是全等的
console.log(proxy === raw) // false
只有代理是响应式的，更改原始的对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用代理作为状态。
为保证访问代理的一致性，对同一个对象调用 reactive() 会总是返回同样的代理，而对代理调用 reactive() 则会返回它自己：
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true
这个规则对深层级的对象也适用。依靠深层响应性，响应式对象内的深层级对象依然是代理：
const proxy = reactive({})
const raw = {}
proxy.nested = raw
console.log(proxy.nested === raw) // false
