Readonly read only

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>