reactive函数

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。

上一篇简单的和大家介绍了关于ref函数的相关内容让大家对vue3中数据修改这个方面进行认识，在本篇我会给大家介绍一下关于vue3中reactive函数作用和相关的使用方式等等，我们先来说他的作用是什么：reactive函数作用主要是: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）可能大家直接看会有点懵。

下面我用代码演示从而帮助大家消化理解。通过import {reactive} from 'vue'引用，reactive函数let person = reactive({job:{a:{b:{c:666}}},hobby:['抽烟','喝酒','烫头',.....]})这种复杂深层次的对象会比较相当拿手。

<template>
<div>
	<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>
</div>
	
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					type:'前端工程师',
					salary:'30K',
					a:{
						b:{
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})

			//方法
			function changeInfo(){
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}

			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}
	}
</script>

因为reactive函数操作性比ref函数的能力大的多，所以我们在平时使用一般是使用的reactive函数。

总结reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。