基于Proxy的ref和reactive的区别

本篇文章在阐述ref和reactive之前我们可以先回顾一下vue中响应式的实现方式：

在阐述这个问题之前，我们先回顾一下什么是数据代理：
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

---

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用  Object.defineProperty 把这些 property 全部转为：getter / setter

vue2中实现代理的方式是通过数据劫持来实现的，也就是使用的Object.defineProperty,所以它的底层就是使用 getter 和 setter

Vue中响应式的实现方式：

Vue2:

1.  在vue2中的响应式是通过 defineProperty 实现的   【defineProperty  定义属性】

所以Object.defineProperty()的作用就是用于定义一个对象的属性

Object.defineProperty(obj, prop, desc)

// obj 需要定义属性的当前对象
// prop 当前需要定义的属性名
// desc 属性描述符

Object.defineProperty(obj,"name4",{
    value:"dd",
    writable: false     // value属性值默认是只读的
})

这边 Object.defineProperty 实现vue2的响应式就是通过get和set 进行实现的。这里没有进行什么赘述，想要了解的可以自己下去查一下。

---

---

---

Vue3:

在vue3中的响应式是通过ES6的Proxy 来实现的，什么是Proxy 哪？ 英文上面的释义是 代理

---

那么这个Proxy 和我们今天所要讲述的ref 和reactive 有什么联系呐？

Proxy 用于创建一个对象的代理，从而实现基本操作的拦截和自定义

响应式的底层原理都是Proxy,Vue3中有两个重要的数据响应式监听方法：ref 和 日reactive,这两个方法都通过Proxy来实现的：

在下面对ref 和reactive的阐述中会进行说明：

ref函数

ref函数的作用是定义一个响应式的数据

语法： const xxx=ref(initValue)

创建一个包含响应式数据的引用对象  （reference对象 简称ref对象）
①  在ref函数中接收的对象可以是基本类型的，也可以是对象类型的，如果是对象类型的那么它的底层还是调用了 reactive 

②  当我们在模板中访问ref中的数据的时候，系统会自动帮我们添加.value

reactive 函数

• reactive的参数一般是对象或者数组,他能够将复杂数据类型变为响应式数据。
• reactive的响应式是深层次的，底层本质是将传入的数据转换为Proxy对象

小tips:
使用reactive定义数据时，会先进行判断定义的数据是否是对象，是对象的话才会继续进行数据响应式的处理，反之就直接被return出来了。