<template>
<h4>当前求和为:{{ sum }}</h4>
<button @click="sum++">点我++</button>
<hr>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>薪资:{{ job.j1.salary }}K</h2>
<button @click="name += '~'">修改姓名</button>
<button @click="age++">修改年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import { ref, reactive, toRefs, readonly, shallowReadonly } from "vue"; // ref处理基本类型数据 reactive处理引用类型数据
export default {
name: "demo",
setup() {
let sum = ref(0)
let person = reactive({
name: "张三",
age: 18,
job: {
j1: {
salary: 20
}
}
})
person = readonly(person) // person里的属性值都不能修改 ... 名字,年龄,涨薪 都点击不了
// person = shallowReadonly(person) // person第一层属性不能修改,深层次的可以改。也就是说,名字和年龄不能改,涨薪可以改
sum = shallowReadonly(sum) // sum++执行不了
return {
sum,
...toRefs(person)
};
},
};
</script>
vue3-api之readonly() 和shallowReadonly()
于 2024-05-27 15:40:04 首次发布