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