快捷導(dǎo)航

Vue3?中的?readonly?特性及函數(shù)使用詳解

更新時(shí)間：2023年04月27日 09:08:31 作者：ScriptMaster

readonly是Vue3中提供的一個新特性，用于將一個響應(yīng)式對象變成只讀對象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下

Vue3 中的 readonly 特性詳解

readonly是Vue3中提供的一個新特性，用于將一個響應(yīng)式對象變成只讀對象。使用readonly可以確保一個對象只能被讀取而不能被修改，從而提高應(yīng)用的穩(wěn)定性和安全性。

在Vue3中，可以使用readonly函數(shù)將一個對象轉(zhuǎn)換為只讀對象，例如：

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

在上面的代碼中，state對象被轉(zhuǎn)換為只讀對象，這意味著state.count屬性只能被讀取，而不能被修改。

需要注意的是，readonly函數(shù)是遞歸的，也就是說，如果一個對象包含其他對象，那么這些對象也會被轉(zhuǎn)換為只讀對象。例如：

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

在上面的代碼中，user對象也被轉(zhuǎn)換為只讀對象，這意味著state.user.name和state.user.age屬性都只能被讀取，而不能被修改。

需要注意的是，readonly函數(shù)只能將一個對象轉(zhuǎn)換為只讀對象，而不能將一個數(shù)組或Map等其他類型的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為只讀對象。如果需要將這些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為只讀對象，可以使用readonly函數(shù)和deepReadonly函數(shù)的組合。例如：

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數(shù)組被轉(zhuǎn)換為只讀數(shù)組，其中的對象也被轉(zhuǎn)換為只讀對象，這意味著數(shù)組和對象都只能被讀取，而不能被修改。

補(bǔ)充：vue3中的readonly單向數(shù)據(jù)流函數(shù)（readonly函數(shù)使用詳解）

vue3中的readonly單向數(shù)據(jù)流函數(shù)，傳入一個對象（響應(yīng)式或普通）或 ref，返回一個原始對象的只讀代理。一個只讀的代理是“深層的”，對象內(nèi)部任何嵌套的屬性也都是只讀的。

一、注意：

1、readonly函數(shù)是將通過ref 或reactive定義好的數(shù)據(jù)進(jìn)行拷貝后變?yōu)閮H可讀的數(shù)據(jù)，不可進(jìn)行修改，即無響應(yīng)

2、如強(qiáng)制修改控制臺將會報(bào)錯警告

二、reactive 和 readonly

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>vue3.0 beta</h1>
    <h1>{{ original.count }} ----- {{ copy.count }}</h1>
    <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 上的修改會觸發(fā) copy 上的偵聽
    original.count++;
    // 無法修改 copy 并會被警告
    copy.count++; // warning!
    return {
      original,
      copy
    };
  }
};
</script>

可以看到觸發(fā)了只2次 "watchEffect" 函數(shù)，因?yàn)?copy 是只讀的。

三、ref 和 readonly

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>vue3.0 beta</h1>
    <h1>{{ refData }} ----- {{ copy }}</h1>
  </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 alt="Vue logo" src="./assets/logo.png" />
    <h1>vue3.0 beta</h1>
    <h1>{{ original.count }} ----- {{ copy.count }}</h1>
    <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 上的修改會觸發(fā) copy 上的偵聽
    original.count++;
    // 無法修改 copy 并會被警告
    copy.count++; // warning!
    const add = () => {
      copy.count++;
    };
    return {
      original,
      copy,
      add
    };
  }
};
</script>

可以看到我們一直點(diǎn)擊按鈕在++操作，控制臺會提示錯誤，然后界面也沒更新，因?yàn)槟愕臄?shù)據(jù)源不是響應(yīng)式的。