vue3中readonly和shallowReadonly

readonly:

深度只讀數據

獲取一個對象 (響應式或純對象) 或 ref 并返回原始代理的只讀代理。

只讀代理是深層的：訪問的任何嵌套 property 也是只讀的。

· shallowReadonly

淺只讀數據

創建一個代理，使其自身的 property 為只讀，但不執行嵌套對象的深度只讀轉換

應用場景:

在某些特定情況下, 我們可能不希望對數據進行更新的操作, 那就可以包裝生成一個只讀代理對象來讀取數據, 而不能修改或刪除

·isReadonly

用于判斷是不是一個readonly對象 > 返回值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: 深度只讀數據
  獲取一個對象 (響應式或純對象) 或 ref 并返回原始代理的只讀代理。
  只讀代理是深層的：訪問的任何嵌套 property 也是只讀的。
shallowReadonly: 淺只讀數據
  創建一個代理，使其自身的 property 為只讀，但不執行嵌套對象的深度只讀轉換 
應用場景: 
  在某些特定情況下, 我們可能不希望對數據進行更新的操作, 那就可以包裝生成一個只讀代理對象來讀取數據, 而不能修改或刪除
isReadonly： 用于判斷是不是一個readonly對象 > 返回值boolean
*/
import {
  defineComponent,
  reactive,
  ref,
  readonly,
  shallowReadonly,
  isReadonly,
} from 'vue'
// vue3.0版本語法
export default defineComponent({
  
  setup () {
    const count1 = ref(1)
    // 原本的ref對象，使用readonly創建出一個只讀對象
    const copyReadonlyRef = readonly(count1)
    console.log('count1',count1)
    console.log('copyReadonlyRef',copyReadonlyRef)
    // 原本的reactive對象，使用readonly創建出一個只讀對象
    const state = reactive({a: {b: 2}})
    const copyReadonlyReactive2 = readonly(state)
    console.log('state', state)
    console.log('copyReadonlyReactive2', copyReadonlyReactive2)
    // 直接創建一個readonly對象
    const copyReadonly3 = readonly({x: {y: 3}})
    console.log('copyReadonly3',copyReadonly3)
    // 3秒后嘗試改變reactive/ref對象的數據和只讀對象的數據
    setTimeout(() => {
      count1.value += 1 // 結果為count1改變為 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)
    // 定義一個shallowReadonly對象，只對自身的property進行只讀轉換，
    // 深層的屬性還是可以改變值的。
    const state3 = shallowReadonly({
      foo: 1,
      nested: {
        bar: 2
      }
    })
    // 改變狀態本身的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);
    
    // 適用于嵌套對象 > 深層的屬性可以改變值
    state3.nested.bar++ // 結果為3 成功改變了值
    
    return {
      count1,
      copyReadonlyRef,
      state,
      copyReadonlyReactive2,
      copyReadonly3,
      state3
    }
  }
})
</script>

初始化頁面及數據：

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

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

3秒后的數據操作更新頁面：

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

會彈出警告??

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

言

在前端開發編寫html文件的時候，我們可能會很熟練的寫出常見的html元素，但是如果問到某些元素的差別時，大家不一定能說的出來，今天就給大家總結一下那些很常見但容易混淆的屬性。

html與css

css引入

css樣式文件引入的方式有兩種，分別是link標簽和@import。

link語法結構

link語法結構如下，注意rel='stylesheet'屬性要加上。

link語法結構

@import語法結構

當@import用在html中時，需要配合style標簽

@import在html中

當@import用在css文件中，直接使用@import url()即可

@import在css中

link與@import的區別與選擇

既然link與@import都可以用來引入css，那么它們的區別是什么呢？我們又該如何選擇呢？

link是XHTML標簽的一種，除了可以加載css外，還可以定義其他rel屬性，而@import只能用來加載css。
link標簽在加載css時，與頁面一同加載，而@import需要等到網頁完全加載以后才進行加載。
link是XHTML標簽，不存在兼容問題，而@import是在CSS2.1中提出的，對于低版本的瀏覽器不支持。
link標簽可以通過Javascript代碼去控制其屬性，而@import不可以。

javascript控制link

@import支持在css文件中再次引入其他css文件，方便對多個css文件的管理。

因為@import引入的文件需要在網頁完全加載后再加載，如果在網絡速度較慢的情況下，會出現頁面閃現，因此建議使用link標簽代替@import。

readonly與disabled屬性

html元素的readonly與disabled屬性一般都是用于無法改變表單的內容，但是兩者也是有區別的。

readonly屬性只針對input(text,password)和textarea元素，而disabled適用于所有表單元素，包括select,radio,checkbox,button等。
在表單元素使用了disabled后，該元素的的值不會隨著form的action請求傳遞到服務器端，而使用readonly的元素值可以傳遞到服務器端。

以下是一些關于兩者的使用建議。

在表單中為用戶預填的唯一標識碼，不允許用戶改動，而且需要傳遞到后臺的使用readonly屬性。
用戶提交完表單元素后，等待服務器端的驗證，這個過程應該將元素設為disabled，button和submit也應該設為disabled，以防止重復提交。

img元素的title和alt屬性

title屬性

img標簽的title屬性是用來提供一些建議性的信息，在鼠標停留在上方時會顯示，它對于圖片來說只是一種注釋性的信息，重要性偏低。

alt屬性

alt屬性是為不能顯示圖像時，用來指定替換文字，需要注意的是替換文字是用來代替文字的，而不是用來注釋文字的。

屬性的使用

在做圖片為主的網頁時，考慮到網頁的SEO，應當設置圖片的alt屬性為圖片的真實內容，而給title設置一些建議性的內容。

總結

今天這篇文章主要將了幾個html中容易混淆的屬性，你有收獲嗎？

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

在線咨詢

上一篇：「譯」來用 SVG 和 CSS 畫朵云彩吧
下一篇：零基礎教你學前端-89、CSS表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商