vue3中的shallowReactive

shallowReactive只能修改reactive中浅层次的数据

格式只能修改xxx.xxx = '555'

不能修改   xxx.xxx.xxx = ''

<template>
	<div>
		{{ sum }}
		{{ person }}
		<button @click="ssum">修改sum</button>
		<button @click="sperson">修改name</button>
		<button @click="spage">修改age</button>
		<button @click="carcar1">修改车</button>
		<button @click="spep">修改整个人</button>
	</div>
</template>

<script setup lang="ts" name="App">
import {ref,shallowRef,reactive,shallowReactive} from 'vue'
let sum = ref(0)
let person = shallowReactive({
	name:'小米',
	age:200,
	car:{
		car1:'奔驰'
	}
})
function ssum(){
	sum.value =+1
}
function sperson(){
	person.name = '张三'
}
function spage(){
	person.age = 111
}
function spep(){
	Object.assign(person,{name:'李四',age:222,car:{car:'奥迪'}})
// 	person = {
// 	name:'里斯',
// 	age:2100,
// 	car:{
// 		car1:'奔驰111'
// 	}
// }
	
}
function carcar1(){
	person.car.car1 = '奥迪'
}
</script>

<style>
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
</style>