vue3中reactive与ref的区别

参考文献

一、reactive

定义

官方定义：返回对象的响应副本

所以：

1. reactive接受一个对象作为参数
2. 其返回值是经reactive函数包装过后的数据对象，这个对象具有响应式

reactive实现响应式是基于ES2015 Proxy实现的。

由于Proxy具有的几个特点：

1. 代理的对象不等于原始数据对象
2. 原始数据对象里的数据和被Proxy包装的对象之间是有关联的。当原始对象里的数据发生改变时，会影响代理对象；代理对象里的数据发生变化，对应的原始数据也发生变化。

当响应式对象里头数据变化的时候原始对象的数据也会变化

我们操作数据的时候通过谁来操作呢?

官方的建议是：

建议只使用响应式代理，避免依赖原始对象

reactive是递归会将每一层包装成Proxy对象的，深度监听每一层的property

小结

1. reactive的参数可以传递对象也可以传递原始值。但是原始值并不会包装成响应式数据

2. 返回的响应式数据的本质Proxy对象

3. 返回的响应式"副本"与原始数据有关联，当原始对象里头的数据或者响应式对象里头的数据发生，会彼此相互影响。两种都可以触发界面更新，操作时建议只使用响应式代理对象

4. 返回的响应式对象里头时深度递归监听每一层的，每一层都会被包装成Proxy对象

二、ref

定义

官方解释：接受一个内部值并返回一个响应式且可变的ref对象

ref就是：原始数据 => 响应式数据 的过程

不管传给ref的是原始值还是引用值，返回的响应数据对象本质都是由RefImpl类构造的对象。不同的是里面的value，一个是原始值，一个是Proxy对象。

无论传入给ref的原始数据是原始值还是引用值，当原始数据发生修改时，并不会影响响应式数据，更不会触发界面UI的更新。

如果响应式数据发生改变，对应界面UI是会自动更新的，不影响原始数据。

小结

1. ref本质是将一个数据变成一个对象，这个对象具有响应式特点

2. ref接受的原始数据可以是原始值也可以是引用值，返回的对象本质都是RefImpl类的实例`

3. 无论传入的原始数据时什么类型，当原始数据发生改变时，并不会影响响应数据，更不会触发UI的更新。但当响应式数据发生改变，对应界面UI是会自动更新的，注意不影响原始数据。所以ref中，原始数据和经过ref包装后的响应式数据是无关联的