Vue reactive函数的使用

reactive函数可以定义一个响应式对象。
在div中引用对象里的数据就可以

<template>
	<div class="ttt">
		<li v-for="data in reactive2" :key="data.name">{{data.name}}</li>
		<h2>{{reactive3.name}}</h2>
		<h2>{{reactive4.a.b.c.d}}</h2>
		<button @click="updateReactive2">更新数据</button>
	</div>
</template>

<script setup lang="ts" name="testName">
	import {ref} from 'vue'
	import {reactive} from 'vue'
	
	let reactive4 = reactive({a:{b:{c:{d:233}}}})
	
	let reactive3 = reactive({id:1,name:'测试数据'})
	
	let reactive2 = reactive([
	{
		name:'测试1'
	},
	{
		name:'测试2'
	},
	])
	
	function updateReactive2(){
		reactive2[0].name = "更新数据"
		reactive4.a.b.c.d = 6666
	}
</script>

<style>
	.ttt{
		color:red
	}
</style>

---

let searchForm = reactive({});
let data = reactive({
isAdmin: true,
isshowAccount: true
});
reactive 是什么？
reactive 是 Vue 3 Composition API 中的一个函数，用于创建一个包含响应式数据的对象。在 Vue 2.x 中，我们通常使用 data 选项来定义组件的数据，而在 Vue 3 中，可以使用 reactive 函数来创建响应式数据对象。

为什么使用它？
使用 reactive 函数可以将普通的 JavaScript 对象转换为响应式对象，使得对象的属性变化可以触发视图的更新。这样可以更方便地管理组件的状态，并确保数据的响应性。

如何使用？
导入 reactive 函数：在 Vue 3 应用中，通常需要从 Vue 模块中导入 reactive 函数。
创建响应式对象：通过调用 reactive 函数并传递一个普通的 JavaScript 对象作为参数来创建响应式对象。
访问和修改数据：可以像访问普通对象属性那样访问和修改响应式对象的属性，Vue 会自动追踪属性的变化并更新相关的视图。

在您的代码中，通过使用 reactive 函数创建了一个包含多个属性的响应式对象 data，其中的属性变化会触发组件视图的更新。您可以直接访问和修改 data 对象中的属性，这些属性的变化会被 Vue 监听到并反映在页面上。

reaactive函数动态添加属性：

下面是一个简单的示例代码，展示了如何使用 reactive 创建一个响应式对象，并动态为其添加新属性：

import { reactive } from 'vue';

// 使用 reactive 创建一个响应式对象
let screenResult = reactive({
  current: 1,
  size: 10
});

// 动态添加新属性 serviceType 和 customListType
screenResult.serviceType = 'someServiceType';
screenResult.customListType = 'someCustomListType';

console.log(screenResult.current); // 输出：1
console.log(screenResult.size); // 输出：10
console.log(screenResult.serviceType); // 输出：someServiceType
console.log(screenResult.customListType); // 输出：someCustomListType

// 当修改这些属性时，界面上绑定的数据也会相应地更新
screenResult.current = 2;
screenResult.serviceType = 'newServiceType';

// Vue 会自动处理数据的响应性，界面会相应地更新显示

在这个示例中，我们首先使用 reactive 创建了一个响应式对象 screenResult，然后动态地为其添加了 serviceType 和 customListType 两个新属性。这种方式能够很好地满足动态添加属性并保持响应性的需求。