reactive函数
作用:
定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
语法:
const 代理对象 = reactive(源对象)
接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
注意:
- reactive定义的响应式数据是“深层次的”。
- 内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作。
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h3>工作种类:{{ person.job.type }}</h3>
<h3>工作薪水:{{ person.job.salary }}</h3>
<h3>爱好:{{ person.hobby }}</h3>
<h3>测试c的值:{{ person.job.a.b.c }}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import { reactive } from "vue";
export default {
name: "App",
setup() {
let person = reactive({
name: "张三",
age: 24,
job: {
type: "web",
salary: "10k",
a: {
b: {
c: 666,
},
},
},
hobby: ["看书", "唱歌"],
});
function changeInfo() {
person.name = "李四";
person.age = 26;
person.job.type = "java";
person.job.salary = "15k";
person.job.a.b.c = 999;
person.hobby[0] = "跳舞";
}
return {
person,
changeInfo,
};
},
};
</script>
<style>
</style>