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