- 作用: 定义一个对象类型的响应式数据（基本类型要用
ref函数） - 语法：
const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） reactive定义的响应式数据是“深层次的”。- 内部基于 ES6 的
Proxy实现，通过代理对象操作源对象内部数据进行操作。
?
<template>
<h1>个人信息</h1>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<h3>岗位： {{ job.type }}</h3>
<h3>薪资： {{ job.salary }}</h3>
<h2>爱好：{{ hobby }}</h2>
<h2>测试数据：{{ demoObj.a.b.c }}</h2>
<button @click="changeInfo">修改信息</button>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
name: 'App',
setup () {
// 响应式数据需要借助ref
// 通过ref定义的基本数据类型最后被封装成了一个实例对象RefImpl（defineProperty：getter、setter），所以修改的时候要修改属性的.value[在模版中不需要.vaule,框架帮助我们处理了])
let name = ref('丫丫')
let age = ref(24)
// (通过ref定义的对象数据类型最后被封装成了一个代理m对象Proxy，
let job = ref({
type: '前端开发',
salary: '3k'
})
// reactive只能接收非基本数据类型
let hobby = reactive(['吃饭', '睡觉', '打豆豆'])
let demoObj = reactive({
number: 23,
a: {
b: {
c: 666
}
}
})
function changeInfo () {
name.value = '美少女'
age.value = 18
job.value.type = 'ui设计师'
job.value.salary = '30k'
hobby[1] = '旅游'
demoObj.a.b.c = 999 //用reactive定义的对象在修改值时不需要.value
}
return {
name,
age,
job,
hobby,
demoObj,
changeInfo
}
}
}
</script>
