ref函数和reactive函数

(一)、ref函数

函数作用：定义一个响应式的数据。

语法：const XXX = ref(initValue)

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

备注：

• 接收的数据可以是：基本类型、也可以是对象类型；
• 基本类型的数据：响应式依然是靠object.defineProperty()的get与set完成的；
• 对象类型的数据：内部“求助”了vue3.0中的一个新函数——reactive函数。

---

(二）、reactive函数

作用：

定义一个对象类型的响应式数据(基本类型不要用它，要用ref函数)

语法：

const代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（proxy对象）；

reactive定义的响应式数据是"深层次的"。

内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

---

ref与reactive对比：

• 从定义数据角度对比：
  • ref用来定义：基本数据类型。
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref定义的数据：操作数据需要.value, 读取数据时模板中直接读取不需要.value 。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。