読み取り専用機能とは何か、および Vue3 でのこの機能の使用方法-Vue.js-php.cn

読み取り専用機能とは何か、および Vue3 でのこの機能の使用方法

WBOY

リリース： 2023-05-10 22:04:04

転載

3017 人が閲覧しました

Vue3 の読み取り専用機能の詳細説明

readonly は Vue3 で提供される新機能で、応答性の高いオブジェクトを読み取り専用オブジェクトに変換するために使用されます。 readonly を使用すると、オブジェクトは読み取りのみ可能で変更はできないようにできるため、アプリケーションの安定性とセキュリティが向上します。

Vue3 では、readonly 関数を使用して、オブジェクトを読み取り専用オブジェクトに変換できます。たとえば、次のようになります。

import { readonly } from &#39;vue&#39;
const state = readonly({
  count: 0
})

ログイン後にコピー

上記のコードでは、 stateオブジェクトは読み取り専用オブジェクトに変換されます。つまり、state.count プロパティは読み取りのみ可能で、変更はできません。

readonly 関数は再帰的であることに注意してください。つまり、オブジェクトに他のオブジェクトが含まれている場合、それらのオブジェクトも読み取り専用オブジェクトに変換されます。例:

import { readonly } from &#39;vue&#39;
const state = readonly({
  user: {
    name: &#39;John&#39;,
    age: 30
  }
})

ログイン後にコピー

上記のコードでは、user オブジェクトも読み取り専用オブジェクトに変換されます。これは、state.user.name および ## を意味します。 #state .user.age プロパティは読み取りのみが可能で、変更はできません。

readonly 関数はオブジェクトを読み取り専用オブジェクトに変換することしかできませんが、配列やマップなどの他のタイプのデータ構造を読み取り専用オブジェクトに変換することはできないことに注意してください。唯一のオブジェクト。これらのデータ構造を読み取り専用オブジェクトに変換する必要がある場合は、readonly 関数と deepReadonly 関数を組み合わせて使用できます。例:

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

ログイン後にコピー

上記のコードでは、

items 配列が読み取り専用配列に変換され、その中のオブジェクトも読み取り専用オブジェクトに変換されます。つまり、配列とオブジェクトは両方とも読み取りのみ可能ですが、変更はできません。

補足: vue3 の readonly 一方向データフロー関数 (readonly 関数の使い方の詳細説明)

未定義

readonly 一方向データフロー関数vue3 では、オブジェクト (リアクティブまたはプレーン) または ref を渡し、元のオブジェクトの読み取り専用プロキシを返します。読み取り専用プロキシは「ディープ」であり、オブジェクト内のネストされたプロパティも読み取り専用です。

1. 注:

1. readonly 関数は、ref または reactive で定義されたデータをコピーし、読み取り可能なデータに変換します。変更することはできません。つまり、応答はありません。

##2. コンソールを強制的に変更すると、エラー警告が報告されます

2. リアクティブかつ読み取り専用

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h2>vue3.0 beta</h2>
    <h2>{{ 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>

ログイン後にコピー

「watchEffect」関数のみがトリガーされることがわかりますコピーは読み取りのみであるため、2 回実行されます。

読み取り専用機能とは何か、および Vue3 でのこの機能の使用方法 3. ref と readonly

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h2>vue3.0 beta</h2>
    <h2>{{ 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>

ログイン後にコピー

次のようなコンソールプロンプトが表示されます:

"キーに操作を設定します" value" failed: target is readonly"

読み取り専用機能とは何か、および Vue3 でのこの機能の使用方法 4. オブジェクト通常のオブジェクトと読み取り専用

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h2>vue3.0 beta</h2>
    <h2>{{ 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>

ログイン後にコピー