Vue3中的readonly特性及函數使用方法是什麼

Vue3 中的 readonly 特性詳解

readonly是Vue3中提供的一個新特性，用於將一個響應式物件變成唯讀物件。使用readonly可以確保一個物件只能被讀取而不能被修改，從而提高應用的穩定性和安全性。

在Vue3中，可以使用readonly函數將一個物件轉換為唯讀對象，例如：

import { readonly } from 'vue'
const state = readonly({
  count: 0
})

在上面的程式碼中，state對像被轉換為唯讀對象，這表示state.count屬性只能被讀取，而不能被修改。

要注意的是，readonly函數是遞歸的，也就是說，如果一個物件包含其他對象，那麼這些物件也會被轉換為唯讀物件。例如：

import { readonly } from 'vue'
const state = readonly({
  user: {
    name: 'John',
    age: 30
  }
})

在上面的程式碼中，user物件也轉換為唯讀對象，這表示state.user.name和state .user.age屬性都只能被讀取，而不能被修改。

要注意的是，readonly函數只能將一個物件轉換為唯讀對象，而不能將一個陣列或Map等其他類型的資料結構轉換為唯讀對象。如果需要將這些資料結構轉換為唯讀對象，可以使用readonly函數和deepReadonly函數的組合。例如：

import { readonly, deepReadonly } from 'vue'
const state = readonly({
  items: deepReadonly([
    { id: 1, name: 'item 1' },
    { id: 2, name: 'item 2' },
    { id: 3, name: 'item 3' }
  ])
})

在上面的程式碼中，items陣列被轉換為唯讀組，其中的對像也被轉換為唯讀對象，這表示陣列和對像都只能被讀取，而不能被修改。

補充：vue3中的readonly單向資料流函數（readonly函數使用詳解）

undefined

vue3中的readonly單向資料流函數，傳入一個對象（響應式或普通）或ref，傳回一個原始物件的唯讀代理。一個唯讀的代理是“深層的”，物件內部任何嵌套的屬性也都是唯讀的。

一、注意：

1、readonly函數是將透過ref 或reactive定義好的資料進行拷貝後變為僅可讀的數據，不可進行修改，即無回應

2、如強制修改控制台將會報錯警告

二、reactive 和readonly

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-original-count-nbsp-nbsp-nbsp-nbsp-copy-count-nbsp">{{ original.count }} ----- {{ copy.count }}</h2>
    <button @click="add">add</button>
  </div>
</template>
<script>
import { reactive, readonly, watchEffect } from "vue";
export default {
  setup() {
    const original = reactive({ count: 0 });
    const copy = readonly(original);
    watchEffect(() => {
      // 依赖追踪
      console.log(copy.count);
    });
    // original 上的修改会触发 copy 上的侦听
    original.count++;
    // 无法修改 copy 并会被警告
    copy.count++; // warning!
    return {
      original,
      copy
    };
  }
};
</script>

可以看到觸發了只2次"watchEffect" 函數，因為copy 是只讀的。

三、ref 和readonly

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-refData-nbsp-nbsp-nbsp-nbsp-copy-nbsp">{{ refData }} ----- {{ copy }}</h2>
  </div>
</template>
<script>
import { ref, readonly } from "vue";
export default {
  setup() {
    const refData = ref(0);
    const copy = readonly(refData);
    // 无法修改 copy 并会被警告
   copy.value++; // warning!
    return {
      refData,
      copy
    };
  }
};
</script>

可以看到控制台提示如下：

"Set operation on key " value" failed: target is readonly"

四、Object普通物件和readonly

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-original-count-nbsp-nbsp-nbsp-nbsp-copy-count-nbsp">{{ original.count }} ----- {{ copy.count }}</h2>
    <button @click="add">add</button>
  </div>
</template>
<script>
import { readonly, watchEffect } from "vue";
export default {
  setup() {
    const original = { count: 0 };
    const copy = readonly(original);
    watchEffect(() => {
      // 依赖追踪
      console.log(copy.count);
    });
    // original 上的修改会触发 copy 上的侦听
    original.count++;
    // 无法修改 copy 并会被警告
    copy.count++; // warning!
    const add = () => {
      copy.count++;
    };
    return {
      original,
      copy,
      add
    };
  }
};
</script>

可以看到我們一直點擊按鈕在操作，控制台會提示錯誤，然後介面也沒更新，因為你的資料來源不是響應式的。

以上是Vue3中的readonly特性及函數使用方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！