1.ref函数：
-
作用：定义一个响应式的数据
-
语法：const xxx=ref(initValue)
-
船舰一个包含响应式数据的
引用对象 -
js中操作数据：xxx.value
-
模板中读取数据：不需要value，直接
div>{{xxx}}</div> -
备注：
-
接收的数据可以是：基本类型，也可以是对象类型。
-
基本类型的数据：响应式依然是靠
object.defineProperty()的get()与set()完成的。 -
对象类型的数据：内部“求助”了vue3中的一个新函数——reactive函数。
2.reactive函数
- 作用：定义一个
对象类型的响应式数据（基本类型别用它，用ref函数） - 语法：
const 代理对象=reactive(被代理对象)接收一个对象（或数组），返回一个代理对象（proxy）对象 - reactive定义的响应式数据是“深层次的”
- 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据都是像响应式的
两者对比
1.从定义数据角度对比：
- ref 用来定义：
基本类型数据 - reactive用来定义：
对象（或数组）数据类型 - 备注：ref也可以用来定义
对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
2.从原来角度对比：
- ref通过object.defineProperty()的get()与set()来实现响应式（数据劫持）
- reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
3.从使用角度对比：
- ref定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value
- reactive定义的数据：操作数据与读取数据：均不需要``.value
