当前位置:网站首页>Readonly read only
Readonly read only
2022-07-07 07:10:00 【To be a woman of light】
adopt reactive perhaps ref You can get a responsive object , But in some cases , We pass it on to other places ( Components ) The responsive object of wants to be in another place ( Components ) By using , But it can't be modified , How to prevent this situation at this time ?
- vue3 For us readonly Methods
- readonly Will return the read-only proxy of the native object ( That is, it is still a Proxy, This is a proxy Of set Method hijacked , And it cannot be modified );
for example : In this way, our attributes can be modified
const info={name:"jiang"}
info.name="Zhang"
But in some cases : We don't want others to modify our name attribute
// principle : We can actually use a responsive proxy object for data hijacking
// Come back then infoProxy The return value does not need to be modified by others
let infoProxy= new Proxy(info,{
// For example, to a component , The component wants to get our data , have access to get Method
get(target.key){
return target[key] // Get key Go straight back to
set(target.key.value){warning(" It is not allowed to modify variable values ")} // Use data hijacking , If you want to modify the console warning
}
})
const name=infoProxy.name //jiang
infoProxy.name="Zhang".
Use
<template>
<div id="app">
<button @click="increat"></button>
</div>
</template>
<script>
// 1.vue3 Provided reactive API Be responsive
import {reactive,readonly} from 'vue'
export default {
props:{
message:{
type:String,
required:true
}
},
setup(){
// Common object
const info1={name:"jiang"}
// Set the read-only property
const readonlyInfo=readonly(info1)
// Responsive object
const info2=reactive({name:"jiang"})
const readonlyInfo=readonly(info2)
const increat=()=>{
// At this time, when modifying our corresponding agent, we will report the corresponding warning
readonlyInfo.name="zhang"
}
return {
increat,
}
}
}
</script>
边栏推荐
- . Net core accesses uncommon static file types (MIME types)
- leetcode 509. Fibonacci number
- Libcurl returns curlcode description
- . Net 5 fluentftp connection FTP failure problem: this operation is only allowed using a successfully authenticated context
- mysql查看bin log 并恢复数据
- Please tell me how to monitor multiple schemas and tables by listening to PgSQL
- Common function detect_ image/predict
- Comment les entreprises gèrent - elles les données? Partager les leçons tirées des quatre aspects de la gouvernance des données
- A slow SQL drags the whole system down
- Special behavior of main function in import statement
猜你喜欢
freeswitch拨打分机号源代码跟踪
Abnova membrane protein lipoprotein technology and category display
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第一阶段答案
Mysql---- import and export & View & Index & execution plan
组件的嵌套和拆分
Anr principle and Practice
How to share the same storage among multiple kubernetes clusters
How can gyms improve their competitiveness?
Release notes of JMeter version 5.5
FPGA course: application scenario of jesd204b (dry goods sharing)
随机推荐
Prime partner of Huawei machine test questions
ANR 原理及实践
How can flinksql calculate the difference between a field before and after update when docking with CDC?
Algorithm --- bit count (kotlin)
Pass child component to parent component
MySQL SQL的完整处理流程
How to model and simulate the target robot [mathematical / control significance]
main函数在import语句中的特殊行为
什么情况下考虑分库分表
Initial experience of addresssanitizer Technology
关于数据库数据转移的问题,求各位解答下
A slow SQL drags the whole system down
非父子组件的通信
Tool class: object to map hump to underline underline hump
Select the product attribute pop-up box to pop up the animation effect from the bottom
sql中对集合进行非空校验
SolidWorks的GB库(钢型材库,包括铝型材、铝管等结构)安装及使用教程(生成铝型材为例)
transform-origin属性详解
Mysql---- import and export & View & Index & execution plan
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书