上一篇:
vue3 shallowRef&shallowReactivehttps://blog.csdn.net/qq_42543244/article/details/122771740本篇记录vue3的readonly & shallowReadonly;顾名思义,readonly只读属性,将一个属性设置为只读的属性;
<template>
<div>Demo组件内容</div>
<div>{{ num }}</div>
<button @click="num++">点击+1</button>
<hr />
<div>姓名:{{ name }}</div>
<div>年龄:{{ age }}</div>
<div>薪资:{{ job.j1.salary }} K</div>
<div>
<button @click="name = '李四'">修改姓名</button>
<button @click="age++">增加年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</div>
</template>
<script>
import { reactive, readonly, ref, shallowReadonly, toRefs } from "vue";
export default {
name: "Demo",
setup() {
/*
readonly:让一个响应式的数据变为只读的(深只读)
shallowReadonly:让一个响应式的数据变成只读的(浅只读,第一层数据只读)
应用场景:不希望数据被修改
*/
let num = ref(1);
let person = reactive({
name: "张三",
age: 18,
job: {
j1: {
salary: 10,
},
},
});
num = readonly(num);
// num = shallowReadonly(num);
// person = readonly(person);
person = shallowReadonly(person);
return {
num,
...toRefs(person),
};
},
};
</script>
下一篇:
vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302