readonly 只读

通过reactive 或者ref 可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？

• vue3 为我们提供了readonly 的方法
• readonly 会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）；

例如：这样写我们的我们的属性是可以被修改的

const info={name:"jiang"}
info.name="Zhang"

但是某些情况：我们不希望别人在这里修改我们的name属性

//原理：我们其实可以用一个响应式的数据劫持的代理对象
//到时候回把infoProxy返回值不需要修改的其他人
  let infoProxy= new Proxy(info,{
  //例如传给一个组件，组件想要获取我们的数据，可以使用get方法
  get(target.key){
return target[key]      //拿到key直接返回
 set(target.key.value){warning("不许允许修改可变的值")} //使用数据劫持,如果要修改控制台警告
}
   })
const name=infoProxy.name  //jiang
infoProxy.name="Zhang". 

使用

<template>
<div id="app">
 <button @click="increat"></button>
</div>
</template>
<script>
// 1.vue3 提供的reactive API  做响应式的
import {reactive,readonly} from 'vue'
export default {
  props:{
    message:{
      type:String,
      required:true
    }
  },
  setup(){
//普通对象
    const info1={name:"jiang"}
  // 设置只读属性
    const readonlyInfo=readonly(info1)

//响应式对象
const info2=reactive({name:"jiang"})
const readonlyInfo=readonly(info2)
    const increat=()=>{
    //这时候修改我们对应的代理的时候回报相应的警告了
    readonlyInfo.name="zhang"
    }
    return {
    increat,
    }
  }
}
</script>