readonly
获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的:访问的任何嵌套 property 也是只读的。
<template>
<div>
<div ref="state">{
{
state.name }}</div>
<div ref="state">{
{
state.attr.age }}</div>
<div ref="state">{
{
state.attr.height }}</div>
<button @click="handelClick">按钮</button>
</div>
</template>
<script>
import {
readonly } from "vue";
export default {
setup() {
let state = readonly({
name: "山竹", attr: {
age: 18, height: 1.88 } }); //本质是reactive({value:null})
function handelClick() {
state.name = "杀生丸";
state.attr.age = 19;
state.attr.height = 1.99;
console.log(state);
}
return {
state, handelClick };
},
};
</script>
效果,没有任何变动
shallowReadonly
使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。
isReadonly
检查对象是否是由readonly创建的只读代理。