一、readonly
使用readonly 可以将数据变为只读的,不管这个数据是ref对象类型的数据还是Proxy对象类型的数据。
使用readonly 需要先进行引入:
import { readonly } from 'vue';
语法格式:
const xxx = readonly(数据);
setup() {
let num = ref(0);
let person = reactive({
name: "张三",
job: {
type:"前端"
}
})
num = readonly(num);
person = readonly(person);
return {
num,
person
};
},
只读表示数据只能被读取而不能被改变,不能和数据可以改变但是没有响应式混淆!
二、shallowReadonly
使用shallowReadonly 需要先进行引入:
import { shallowReadonly } from 'vue';
语法格式:
const xxx = shallowReadonly (数据);
如果传入的是普通数据类型的数据,和readonly 没有什么区别。
如果传入的是对象类型的数据,那么只有浅层次的数据只读,深层数据是不可读的。
比如: 在下面的代码中,num 是只读的,person.name是只读的,而person.job.type 是可以修改并带有响应式的。
setup() {
let num = ref(0);
let person = reactive({
name: "张三",
job: {
type:"前端"
}
})
num = shallowReadonly(num);
person = shallowReadonly(person);
return {
num,
person
};
},