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

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

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

Vue3 中的 readonly 特性詳解

readonly是Vue3中提供的一個新特性，用于將一個響應式對象變成只讀對象。使用readonly可以確保一個對象只能被讀取而不能被修改，從而提高應用的穩(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ù)組和對象都只能被讀取，而不能被修改。

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

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

一、注意：

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

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

二、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ù)，因為 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>

可以看到我們一直點擊按鈕在++操作，控制臺會提示錯誤，然后界面也沒更新，因為你的數(shù)據(jù)源不是響應式的。

到此這篇關(guān)于Vue3 中的 readonly 特性詳解的文章就介紹到這了,更多相關(guān)Vue3 readonly內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue異步更新機制及$nextTick原理的深入講解
最近在學習一些底層方面的知識,所以想做個系列嘗試去聊聊這些比較復雜又很重要的知識點,下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue如何在main.js中配置全局的通用公共組件
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧
2024-06-06
這篇文章主要介紹了ant design pro中可控的篩選和排序?qū)嵗?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11