reactive
我们先定义一个 reactive 然后看看到底是什么样子的
setup() {
const person = reactive({
name: 'jyk',
age: 100
})
console.log('reactive:', person)
console.log('reactive-Type:', typeof person)
console.log('reactive-call:', Object.prototype.toString.call(person))
return {
person
}
}
看看真面目：
001reactive结构.png
Proxy
Proxy 是ES6提供的一个“代理器”，可以拦截对对象的访问，拦截后就可以做想做的事情了，比如在vue里面就利用这个特性实现数据的响应性。Target
是我们想要操作的对象，这里只能是对象（包括数组），但是不能是简单类型，比如number、bool、string等都不支持。Handler
可以设置拦截代码，比如get和set，Vue又增加了一些方法实现相关的功能。const
reactive 可以用 const 来定义，但是不能直接整体赋值，整体赋值的话会报错，改用let定义的话，也是不能整体赋值的，因为整体赋值相当于改了类型，不会再响应了（严格的说，原本具有相应性的被丢弃了）。
ref
我们再来看看ref的情况
setup() {
// 简单类型
const string = Vue.ref('jyk')
// 对象
const person = Vue.ref({
name: 'jyk',
age: 100
})
console.log('ref-string:', string)
console.log('ref-object:', person)
return {
person,
string
}
}
打印出来看看：
对象类型：
002存放object的ref结构.png
不知道是否和你想象的一致。
- value
这里放的是我们需要的数据，如果是对象类型的话，会自动变成Proxy，那么是不是可以说，ref 把reactive包含起来了呢？
简单类型：
003存放string的ref的结构.png
这个就简单多了，value里面就是我们设置的字符串。然后用其他方式实现了数据的响应性，具体怎么实现的不太清楚。
reactive和ref如何选择？
对比一下我们就会发现，ref 比 reactive 更全能，因为reactive能做的事情，ref 都能做，因为 ref 的 value 可以是Proxy。
而且ref.value 可以直接整体赋值，这个在一些情况下还是非常方便的。
ref唯一麻烦的就是，用的时候要“.value”，这个有点别扭。
另外还有一个隐藏的小麻烦，不过一般不会遇到。
简单粗暴的方式
不管三七二十一 全都用ref，功能全、啥都能装、可以直接赋值，风格统一，全都.value就好，不用区分是不是reactive的。精打细算的方式
按照场景需求，该用啥就用啥。这个就要看具体情况了，具体问题具体分析嘛。
