# Vue3教程 - 24 其他API
下面介绍一下 Vue3 中其他可能用到的 API，了解一下，万一需要呢。
# 24.1 shallowRef
shallowRef 是用于创建浅层响应式数据的API，和 ref 的区别是 shallowRef 只对第一层数据的变化进行响应式处理，这意味着，如果通过shallowRef创建了一个包含复杂对象的引用，那么只有当该对象本身（即引用）发生变化时，才会触发响应式更新；而对象内部属性的变化则不会触发更新。
举个栗子：
<template>
<div>
<div>{{ count }}</div>
<div> {{ person.name }} - {{ person.age }}</div>
<button @click="changeData1">修改数据1</button>
<button @click="changeData2">修改数据2</button>
</div>
</template>
<!-- setup -->
<script lang="ts" setup>
import { shallowRef } from 'vue';
// 创建浅层响应式数据
let count = shallowRef(0);
let person = shallowRef({
name: 'doubi',
age: 13
});
function changeData1() {
count.value ++; // 触发响应
person.value = {name: 'niubi', age: 14}; // 触发响应
}
function changeData2() {
person.value.name = 'caibi'; // 不会触发响应
person.value.age = 15; // 不会触发响应
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
在上面的代码中，通过 person.value.name 修改数据是无法触发响应的，只在修改第一层数据的时候触发响应。
# 24.2 shallowReactive
shallowReactive 和 shallowRef 是类似的。
内容未完......