1.readonly
使用readonly包装过的函数,内部是深层次只读的
如代码所示:
<template>
<h4>当前求和是:{{sum}}</h4>
<button @click="sum++">点我加一</button>
<hr>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪资:{{job.j1.salary}}</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";
export default {
name: "Demo",
setup() {
//数据
let sum = ref(0)
//定义了一个响应式的对象
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
person = readonly(person)//使用了readonly将对象变为只读
return {
sum,
...toRefs(person)
};
},
};
</script>
<style>
</style>
代码中定义了了一个响应式对象person,然后使用readonly(person)方法传入person返回一个只读的对象,用person接受并返回。所以当运行完成打开页面,点击修改信息,增长年龄,涨薪,都会无法修改。
如图:
2.shallowReadonly
使用shallowReadonly包装过的函数,只有最外层属性是只读的,内层依然可以改写。
如代码所示:
//跟上面的代码一样,只是将readonly(person)=> shallowReadonly(person)
person = shallowReadonly(person)//使用了shallowReadonly将对象变为浅只读
我们定义的响应式对象里面只读的是外面的那一层(name, age),所以在页面上修改的时候,只有name和age会提示如图
3.明明定义的是一个响应式数据(person)当然就是希望被修改的,但shallowReadonly和readonly又是希望不被修改的。那这到底什么时候使用呢?
如果这个代码中的person的数据是其他组件传给你的,那个组件只是希望你使用但是不修改,但是你不确定你的组件内会不会修改它,所以用readonly和shallowReadonly去修饰,用这两个包裹person生成新的person对象,就算你修改新生成person对象的属性,也不会影响原有的person属性