vue3中shallowRef 和shallowReactive的使用

一、介绍

1. shallowRef：只会处理基本数据类型的响应式，不会对对象的响应式进行处理

2. shallowReactive：只对对象的最外层数据进行响应式处理（浅响应式），不会对深层的数据进行处理

二、shallowRef 使用

shallowRef 处理基本数据类型的样例，响应式 有效：

在这里插入代码片
<templace>
<div>
	<p>数量：{{ num }}</p>
	<button @click="changeNum()">
</div>
</templace>

<script lang="ts" setup>
import {shallowRef} from 'vue
const num = shallowRef(0)
function changeNum(){
	num.value ++ 
}
</script>

shallowRef 处理对象数据类型的样例，响应式 无效：

在这里插入代码片
<templace>
<div>
	<p>数量：{{ num }}</p>
	<button @click="changeNum()">
</div>
</templace>

<script lang="ts" setup>
import {shallowRef} from 'vue
const num = shallowRef({
	x: 0,
	y: 0
)
function changeNum(){
	num.value.x ++ 
	num.value.y ++
}
</script>

三、shallowReactive 使用

shallowReactive 定义一个对象，修改数据时：

定义在对象第一层的属性响应式 有效 ；
深层次的数据将不再是一个响应式对象，而是一个普通对象，定义在深层次的数据响应式 无效 。

在这里插入代码片
<templace>
<div>
	<p>名称：{{ ex.name }}</p>
	<p>位置坐标x：{{ ex.location.coordinate.x }}</p>
	<p>位置坐标y：{{ ex.location.coordinate.y }}</p>
	<button @click="changeData()">
</div>
</templace>

<script lang="ts" setup>
import {shallowReactive} from 'vue
const ex = shallowReactive({
	name: "apple",				// 对象第一层的数据是响应式数据
	location: {
		coordinate:{
		   x:116,           	// 深层的数据是一个普通的对象，并非响应式对象
		   y:51
		 }
	}
})
function changeData(){
	ex.value.name = "apples"
	ex.value.location.coordinate.y --
}
</script>