Vue3（九）ref（0）vs reactive（{value: 0}）

ref（0）vs reactive({value: 0})放在一起，似乎好像是一样的，但是只能说实现的功能是一样的，而且我们也确实可以这么做，但是vue内部却并不是这么实现。

我们还是用事实来说话。

写个代码对照一下

const ref1 = ref(0)
const ret1 = reactive({ value: 0 })
console.log(ref1, ret1)
复制代码

看一下结果，

reactive：

ref：

通过对比就会发现，reactive 是Proxy代理，有Handler和target两大部分组成，而ref里面根本没有这两个部分。

而value指向的也是 0 这个简单类型，和 reactive 也没有任何关系。

所以 ref(0) 和 reactive 是一点关系都没有的。

然后我们再看看看 ref ({ value: 0 })的情况

const ref2 = ref({ value: 0 })
console.log(ref2)
复制代码

可以看到，这时候 value 指向的是一个Proxy，也就是说，ref 内部先把对象变成 reactive 的 Proxy 代理形式，然后挂到 value 上面。就是在 reactive 外面套了个娃。

所以就算是对象的 ref，也并不是把 ref 变成了 reactive，而只是把 object 变成了reactive，然后再套上ref。

那么 ref 到底是什么呢？这就要看一下源码了。

难的是个类？再继续看：

还真的是ES6的 class 定义的一个类，然后用 set 和 get 拦操作。

那么 为啥要自己写个类呢？放着现成的reactive不用这又是为啥？

再往下看，可以看到 toRef 的源码，大概就知道了。

const ret = reactive({ name: '111' })
const name = toRef(ret, 'name')
复制代码

简单的说，就是把 name = '666' 的操作变成了 ret['name'] = '666' 的操作，这样就自然有响应性了。

大概就是这个原因吧。