vue3 | readonly、shallowReadonly
readonly
接受一个对象(不管是响应式还是普通的)或者是一个ref,返回的是一个原值的只读代理。
<template>
<n-el class="h-400 w-full flex flex-col justify-center items-center">
<n-el>{{ data }}</n-el>
<n-el>{{ readonlyData }}</n-el>
<n-button @click="handleAddData">增加data</n-button>
<n-button class="!mt-2" @click="handleAddReadonlyData">增加readonlyData</n-button>
</n-el>
</template>
<script setup lang="ts">
import { readonly, ref } from 'vue'
const data = ref(100)
const readonlyData = readonly(data)
const handleAddData = () => {
data.value++
}
const handleAddReadonlyData = () => {
readonlyData.value++
}
</script>
编辑器提示
shallowReadonly
readonly()
的浅层作用形式
<template>
<n-el class="h-400 w-full flex flex-col justify-center items-center">
<n-el>{{ obj.a }}</n-el>
<n-el>{{ obj.b.res }}</n-el>
<n-el>{{ obj.b.c.res }}</n-el>
<n-el>------------------------</n-el>
<n-el>{{ readonlyObj.a }}</n-el>
<n-el>{{ readonlyObj.b.res }}</n-el>
<n-el>{{ readonlyObj.b.c.res }}</n-el>
<n-button class="!mt-2" @click="handleAddObj">增加obj</n-button>
<n-button class="!mt-2" @click="handleAddReadonlyObj">增加readonlyObj</n-button>
</n-el>
</template>
<script setup lang="ts">
import { reactive, shallowReadonly } from 'vue'
const obj = reactive({
a: 1,
b: {
res: 2,
c: {
res: 3,
},
},
})
const readonlyObj = shallowReadonly(obj)
const handleAddObj = () => {
obj.a = 100
obj.b.res = 200
obj.b.c.res = 300
}
const handleAddReadonlyObj = () => {
readonlyObj.a = 100
readonlyObj.b.res = 200
readonlyObj.b.c.res = 300
}
</script>
增加obj
增加readonlyObj
分类:
vue3
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期