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