v3的reactive和ref

reactive

1. 作用：定义一个对象类型的响应式数据
2. 语法：const 代理对象 = reactive（源对象）接受一个对象（或数组），返回一个代理对象（proxy对象）
3. reactive定义的响应式数据是"深层次的"
4. JS操作数据：xxx 不需要.value

ref 

1. 作用：定义一个响应式的数据
2. 语法：const xxx = ref（initValue）

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

reactive和ref对比

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