<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 {readonly,ref} from 'vue'
let sum = ref(0)
let person = ref({
name:'小米',
age:200,
car:{
car1:'奔驰'
}
})
let person1 = readonly(person)
function ssum(){
su1.value =+1
}
function sperson(){
person1.value.name = '张三'
}
function spage(){
person1.value.age = 111
}
function spep(){
Object.assign(person,{name:'李四',age:222,car:{car:'奥迪'}})
// person = {
// name:'里斯',
// age:2100,
// car:{
// car1:'奔驰111'
// }
// }
}
function carcar1(){
person1.value.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>
只读,被readonly定义的所有属性都是只读的,不可以修改,但是他可以跟随被赋值的那个变化,他是不能主动修改的,意思就是被赋值的那个变化,他会跟着变,但是他不能手动变