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

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实现通过代理对象操作源对象内部进行实现。