readonly:

深度只讀數(shù)據(jù)

獲取一個(gè)對(duì)象 (響應(yīng)式或純對(duì)象) 或 ref 并返回原始代理的只讀代理。

只讀代理是深層的：訪(fǎng)問(wèn)的任何嵌套 property 也是只讀的。

· shallowReadonly

淺只讀數(shù)據(jù)

創(chuàng)建一個(gè)代理，使其自身的 property 為只讀，但不執(zhí)行嵌套對(duì)象的深度只讀轉(zhuǎn)換

應(yīng)用場(chǎng)景:

在某些特定情況下, 我們可能不希望對(duì)數(shù)據(jù)進(jìn)行更新的操作, 那就可以包裝生成一個(gè)只讀 代理對(duì)象來(lái)讀取數(shù)據(jù), 而不能修改或刪除

·isReadonly

用于判斷是不是一個(gè)readonly對(duì)象 > 返回值boolean

<template>
  <div style="font-size: 14px;">
    <p>{{count1}}</p>
    <p>{{copyReadonlyRef}}</p>
    <p>{{state}}</p>
    <p>{{copyReadonlyReactive2}}</p>
    <p>{{copyReadonly3}}</p>
    <p>{{state3}}</p>
  </div>
</template>

<script lang="ts">
/*
readonly: 深度只讀數(shù)據(jù)
  獲取一個(gè)對(duì)象 (響應(yīng)式或純對(duì)象) 或 ref 并返回原始代理的只讀代理。
  只讀代理是深層的：訪(fǎng)問(wèn)的任何嵌套 property 也是只讀的。
shallowReadonly: 淺只讀數(shù)據(jù)
  創(chuàng)建一個(gè)代理，使其自身的 property 為只讀，但不執(zhí)行嵌套對(duì)象的深度只讀轉(zhuǎn)換 
應(yīng)用場(chǎng)景: 
  在某些特定情況下, 我們可能不希望對(duì)數(shù)據(jù)進(jìn)行更新的操作, 那就可以包裝生成一個(gè)只讀代理對(duì)象來(lái)讀取數(shù)據(jù), 而不能修改或刪除
isReadonly： 用于判斷是不是一個(gè)readonly對(duì)象 > 返回值boolean
*/
import {
  defineComponent,
  reactive,
  ref,
  readonly,
  shallowReadonly,
  isReadonly,
} from 'vue'
// vue3.0版本語(yǔ)法
export default defineComponent({
  
  setup () {
    const count1 = ref(1)
    // 原本的ref對(duì)象，使用readonly創(chuàng)建出一個(gè)只讀對(duì)象
    const copyReadonlyRef = readonly(count1)
    console.log('count1',count1)
    console.log('copyReadonlyRef',copyReadonlyRef)
    // 原本的reactive對(duì)象，使用readonly創(chuàng)建出一個(gè)只讀對(duì)象
    const state = reactive({a: {b: 2}})
    const copyReadonlyReactive2 = readonly(state)
    console.log('state', state)
    console.log('copyReadonlyReactive2', copyReadonlyReactive2)
    // 直接創(chuàng)建一個(gè)readonly對(duì)象
    const copyReadonly3 = readonly({x: {y: 3}})
    console.log('copyReadonly3',copyReadonly3)
    // 3秒后嘗試改變r(jià)eactive/ref對(duì)象的數(shù)據(jù)和只讀對(duì)象的數(shù)據(jù)
    setTimeout(() => {
      count1.value += 1 // 結(jié)果為count1改變?yōu)?2
      copyReadonlyRef.value += 2 // 警告: Set operation on key "value" failed: target is readonly
      delete copyReadonlyRef.value // 警告: Delete operation on key "value" failed: target is readonly
      state.a.b++
      copyReadonlyReactive2.a.b++ // 警告: Set operation on key "count" failed: target is readonly
      copyReadonly3.x.y++ // 警告: Set operation on key "count" failed: target is readonly
    }, 3000)
    // 定義一個(gè)shallowReadonly對(duì)象，只對(duì)自身的property進(jìn)行只讀轉(zhuǎn)換，
    // 深層的屬性還是可以改變值的。
    const state3 = shallowReadonly({
      foo: 1,
      nested: {
        bar: 2
      }
    })
    // 改變狀態(tài)本身的property將失敗
    state3.foo++ // 警告: Set operation on key "foo" failed: target is readonly
    console.log('isReadonly?state3.foo',isReadonly(state3.foo));// false
    console.log('isReadonly?state3.nested',isReadonly(state3.nested));// false
    console.log('shallowReadonly-state3',state3);
    
    // 適用于嵌套對(duì)象 > 深層的屬性可以改變值
    state3.nested.bar++ // 結(jié)果為3 成功改變了值
    
    return {
      count1,
      copyReadonlyRef,
      state,
      copyReadonlyReactive2,
      copyReadonly3,
      state3
    }
  }
})
</script>

初始化頁(yè)面及數(shù)據(jù)：

可以看到shallowReadonly第一層 是只讀對(duì)象想改變值 是會(huì)彈出警告，

而深層的值是可以被改變的state3.nested.bar++后 值為3了。

3秒后的數(shù)據(jù)操作更新頁(yè)面：

可以看到非readonly對(duì)象是值可以被改變的，而readonly對(duì)象包裹的無(wú)論是reactive還是ref對(duì)象都不可以改變值也不可以delete刪除值。

會(huì)彈出警告??

歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開(kāi)發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開(kāi)發(fā)的精彩內(nèi)容。

學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無(wú)論你是想成為一名專(zhuān)業(yè)的前端工程師，還是僅僅對(duì)前端開(kāi)發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。

在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁(yè)。我將深入講解每個(gè)語(yǔ)言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無(wú)論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開(kāi)發(fā)者，我的文章都能夠滿(mǎn)足你的學(xué)習(xí)需求。

此外，我還會(huì)分享一些關(guān)于前端開(kāi)發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過(guò)我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。

我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開(kāi)發(fā)，并提升你的技能。

如果你想了解更多關(guān)于前端開(kāi)發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來(lái)最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開(kāi)發(fā)的奇妙世界！

紹input[type="hidden"],input[type="file"]兩種特殊的表單元素，readonly disabled只讀屬性與禁用屬性的區(qū)別于使用場(chǎng)景。