最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly

readonly api详解用于创建一个对象的深只读副本。含义有两层一是创建的副本对象是只读的。二是副本对象是深层次只读。用一个实例说明什么事深层次只读。Fish组件代码template div classfish h5{{fishs1}}/h5 h5 {{fishs2}}/h5 button clickchangeFish()改变鱼1/button /div /template script setup langts import { reactive, readonly } from vue; let fishs1 reactive( { name: 鲫鱼, body: { pirce: 10, } }); let fishs2 readonly(fishs1); function changeFish() { fishs1.name ~ fishs1.body.pirce 10; // 不可修改 fishs2.name ~ // 不可修改 fishs2.body.pirce 10; } /script运行如下图fishs2.name ~ 与fishs2.body.pirce 10;修改不成功提示警告信息其中fishs2.body.pirce 10;属于深层次不可修改shallowReadOnly api详解shallowReadOnly 浅层次只读与ReadOnly深层次相对应。它只是第一层数据不可修改第二层以后都可修改。Fish组件代码template div classfish h5{{fishs1}}/h5 h5 {{fishs2}}/h5 button clickchangeFish()改变鱼1/button /div /template script setup langts import { reactive, shallowReadonly } from vue; let fishs1 reactive( { name: 鲫鱼, body: { pirce: 10, } }); let fishs2 shallowReadonly(fishs1); function changeFish() { fishs1.name ~ fishs1.body.pirce 10; fishs2.name ~ fishs2.body.pirce 10; } /script运行效果如图fishs2.body.pirce 10;价格可以修改。