当前位置: 首页 > article >正文

Vue - readonly 与 shallowReadonly

一、readonly

  • 作用readonly 用于创建一个深度只读的响应式对象。这个对象的属性及其嵌套属性都无法被修改(即所有层次的数据都无法被修改)。
  • 适用场景: 适合在需要保护对象不被修改的情况下使用,比如将状态传递给子组件,防止子组件意外更改父组件的状态。
<template>
    <div class="person">
       <h4>汽车car1:{
  
  { car1}}</h4>
       <h4>汽车car2:{
  
  { car2}}</h4>
       <button @click="changeGrand1">修改品牌(car1)</button>
       <button @click="changeColor1">修改颜色(car1)</button>
       <button @click="changePrice1">修改价格(car1)</button>
       <hr/>
       <button @click="changeGrand2">修改品牌(car2)</button>
       <button @click="changeColor2">修改颜色(car2)</button>
       <button @click="changePrice2">修改价格(car2)</button>
    </div>

    
</template>
    
<script setup lang='ts' >
import { ref,readonly, reactive,shallowReadonly } from 'vue'

const car1 = reactive({
    brand: '奔驰',
    options: {
        color: 'red',
        price:8520,
    }
})
// 使用 readonly
const car2 = readonly(car1)

// 可修改
const changeGrand1 = ()=>{
    car1.brand = '宝马'
} 
// 可修改
const changeColor1 = ()=>{
    car1.options.color = 'skyblue'
}
// 可修改
const changePrice1 = ()=>{
    car1.options.price += 20
}
// 不可修改
const changeGrand2 = ()=>{
    car2.brand = '宝马'
}
// 不可修改
const changeColor2 = ()=>{
    car2.options.color = 'skyblue'
}
// 不可修改
const changePrice2 = ()=>{
    car2.options.price += 20
}
</script>
<style scoped>

</style>

二、shallowReadonly

  • 作用shallowReadonly 与 readonly 相似,但它只会将对象的第一层属性变为只读,而不会深度递归到嵌套对象的属性。即仅对对象的顶层属性创建只读代理,嵌套属性仍然是可修改的。
  • 适用场景: 当确信需要保持对象的整体只读性,但愿意允许嵌套对象属性的可修改性时,使用 shallowReadonly 可以提高性能。
<template>
    <div class="person">
       <h4>汽车car1:{
  
  { car1}}</h4>
       <h4>汽车car2:{
  
  { car2}}</h4>
       <button @click="changeGrand1">修改品牌(car1)</button>
       <button @click="changeColor1">修改颜色(car1)</button>
       <button @click="changePrice1">修改价格(car1)</button>
       <hr/>
       <button @click="changeGrand2">修改品牌(car2)</button>
       <button @click="changeColor2">修改颜色(car2)</button>
       <button @click="changePrice2">修改价格(car2)</button>
    </div>

    
</template>
    
<script setup lang='ts' >
import { ref,readonly, reactive,shallowReadonly } from 'vue'

const car1 = reactive({
    brand: '奔驰',
    options: {
        color: 'red',
        price:8520,
    }
})
// 使用 shallowReadonly
const car2 = shallowReadonly(car1)

// 可修改
const changeGrand1 = ()=>{
    car1.brand = '宝马'
} 
// 可修改
const changeColor1 = ()=>{
    car1.options.color = 'skyblue'
}
// 可修改
const changePrice1 = ()=>{
    car1.options.price += 20
}
// 不可修改
const changeGrand2 = ()=>{
    car2.brand = '宝马'
}
// 可修改
const changeColor2 = ()=>{
    car2.options.color = 'skyblue'
}
// 可修改
const changePrice2 = ()=>{
    car2.options.price += 20
}
</script>
<style scoped>

</style>

总结

API深度嵌套属性可修改性使用场景
readonly深度不可修改对整个对象和嵌套属性都只读
shallowReadonly浅层可修改(除顶层外)对顶层属性只读,嵌套属性可修改

http://www.kler.cn/a/531054.html

相关文章:

  • Kamailio、MySQL、Redis、Gin后端、Vue.js前端等基于容器化部署
  • C++基础day1
  • C#常用744单词
  • 小程序-基础加强-自定义组件
  • 【llm对话系统】大模型 Llama 源码分析之 LoRA 微调
  • 数组—学习
  • 模拟实战-用CompletableFuture优化远程RPC调用
  • 【优先算法】专题——位运算
  • 存储器知识点2
  • 基础IO的学习
  • 代码随想录-训练营-day18
  • 【go语言】grpc 快速入门
  • 30分钟入门CompletableFuture并发工具使用
  • 【漫话机器学习系列】077.范数惩罚是如何起作用的(How Norm Penalties Work)
  • mac执行brew services list时,无法连接GitHub
  • 谷歌Titans模型论文解析,Transformer迎来变革拐点——DeepSeek能否“接招”?
  • 七. Redis 当中 Jedis 的详细刨析与使用
  • 【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具03
  • 【建站】专栏目录
  • 51c视觉~CV~合集10
  • Windows图形界面(GUI)-QT-C/C++ - QT Stacked Widget
  • 运维自动化工具集:构建高效运维体系的密钥
  • 浏览器模块化难题
  • 解决vscode扩展插件开发webview中的请求跨域问题
  • 【前端】ES6模块化
  • 大模型综合性能考题汇总