1.前言

     reactive定义对象类型的响应式数据(不能进行基本类型数据的响应式)

2.实践 

2.1语法

 const 代理对象 = reactive(源对象) 接收一个对象(或数组)，返回一个代理对象 (Proxy的实例对象，简称proxy对象)

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    // 数据 对象
    // job代理对象  reactive中的是源对象
    let job = reactive({
      type: "前端开发",
      workYear: "10年",
      a: {
        b: {
          ya: "123",
        },
      },
      list: ["烟", "酒"],
    });
    // 方法
    function changeInfo() {
      job.type = "java开发";
      job.workYear = "6年";
      console.log("更改", job.type, job.workYear);
      job.list[0] = "学习";
      console.log(job.a.b.c, a[0]);
    }
    // 返回对象
    return {
      job,
      changeInfo,
    };
  },
};
</script>

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

结合上面总体代码

 console.log(job.a.b.c, a[0]);

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

3.ref与reactive对比

定义数据角度:

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

从原理角度:

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

使用角度:

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