reactive 是 Vue 3 响应式系统中的核心 API 之一，它用于将一个普通的 JavaScript 对象转换为响应式对象。当这个对象的属性发生变化时，Vue 3 能够自动追踪并通知所有依赖这个属性的组件进行更新。
reactive
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>这是reactive源码，它的传参限制只能使用引用类型；
基础语法：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
// 使用 reactive 创建响应式状态
const state = reactive({
count: 0,
});
// 定义方法
const increment = () => {
state.count++;
}
</script>reactive对其赋值：
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
// 使用 reactive 创建响应式对象
const person = reactive({
name: 'John Doe',
age: 30,
});
// 定义方法，用于更新 person 对象
const updatePerson = () => {
person.name = 'Jane Doe';
person.age = 35;
}
</script>看到我是把person里的属性一个个的赋值的，那我们为什么不能直接赋值呢！
// 定义方法，用于更新 person 对象
const updatePerson = () => {
person = {
name: 'Jane Doe',
age: 35
}
} 注意：reactive直接赋值会失去响应式。
我们可以这样：
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
// 使用 reactive 创建响应式对象
const person = reactive({
info: {
name: 'John Doe',
age: 30
}
});
// 定义方法，用于更新 person 对象
const updatePerson = () => {
person.info = {
name: 'Jane Doe',
age: 35
}
}
</script>shallowReactive
shallowReactive 用于创建一个响应式对象的浅层代理。这意味着只有对象的顶层属性是响应式的，如果属性本身是一个对象或数组，那么它们不会被递归地转换为响应式。
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<button @click="updateName">Update Name</button>
</div>
</template>
<script setup lang="ts">
import { shallowReactive } from 'vue';
// 假设我们有一个复杂的用户对象，但我们只关心 name 和 age 的变化
const initialState = {
user: {
name: 'John Doe',
age: 30,
address: {
street: '123 Main St',
city: 'Anytown',
// ... 可能还有其他深层嵌套属性
},
},
};
// 使用 shallowReactive 创建浅层响应式对象
const state = shallowReactive(initialState);
// 定义方法，用于更新 name 属性
function updateName() {
state.user.name = 'Jane Doe'; // 响应式的
state.user.address = {...}； // 非响应式的
}
</script>使用
shallowReactive函数创建了state对象，它是对initialState的一个浅层响应式代理。这意味着只有state.user、state.user.name和state.user.age是响应式的，而state.user.address及其子属性不是响应式的。
readonly
readonly 函数可以用来创建一个只读的响应式代理，这意味着代理对象的属性是只读的，不能被修改。
<template>
<div>
<p>Name: {{ userInfo.name }}</p>
<p>Age: {{ userInfo.age }}</p>
<!-- 注意：尝试修改 userInfo 的属性会导致错误 -->
</div>
</template>
<script setup lang="ts">
import { readonly, ref } from 'vue';
// 创建一个响应式对象
const userInfo = ref({
name: 'John Doe',
age: 30,
});
// 使用 readonly 创建一个只读的响应式代理
const readOnlyUserInfo = readonly(userInfo);
</script>
