Vue3 reactive函数

1、作用

定义一个对象的响应式数据(基本类型不用它，用ref)

2、使用

a、引入

import { reactive } from 'vue';

b、语法

const 代理对象= recative(源对象)

源对象可以是数组或对象，返回Proxy对象的实例对象

3、reactive定义的响应式是深层次的

4、案例

<template><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>工作：{{person.job.wMode}}</h2><h2>薪水：{{person.job.salary}}</h2><h2>爱好:{{ person.hobby[0] }}</h2><button @click="changeInfo">点击</button>
</template><script>import { ref } from 'vue';import { reactive } from 'vue';export default {name: 'App',components: {},setup() {const person = reactive({name: 'jojo',age: 8,job:{wMode:996,salary:2800},hobby:['抽烟', '喝酒', '烫头']})function changeInfo(){person.name = 'duke'person.age = 4person.job.wMode = '855'person.job.salary = 3500person.hobby[0] = '开车'}return {person,changeInfo,}}}
</script><style></style>

5、比较

比ref好用