一，ref函数

1.作用:定义一个响应式的数据

2.语法 const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
• js中操作数据：xxx.value
• 模板中读取数据：不需要.value,直接<div>{{xxx}}</div>

3.备注：

• 接受的数据可以是：基本类型，也可以是对象类型
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
• 对象类型的数据：内部“求助”了Vue3中的一个新函数 -- reactive 函数

二，reactive函数

• 作用：定义一个对象类型的响应式数据(基本类型不要用它，要用ref函数)
• 语法：const 代理对象 = reactive(源对象) 接受一个对象或者数组，返回一个代理对象(Proxy的实例对象，简称proxy对象)
• reactive定义的响应式数据是深层次的
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

三，reactive对比ref

1.从定义数据角度对比

• ref用来定义：基本类型数据
• reactive 用来定义：对象或者数组类型数据
• 备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代理对象

2.从原理角度对比：

• ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
• reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

3.从使用角度对比：

• ref定义的数据：操作数据需要.value,读取数据时模板直接读取不需要.value
• reactive定义的数据：操作数据与读取数据：均不需要.value