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
}
}
我们可以这样:
<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>
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>