Qu'est-ce que la fonctionnalité en lecture seule et comment utiliser la fonction dans Vue3

Explication détaillée de la fonctionnalité en lecture seule dans Vue3

readonly est une nouvelle fonctionnalité fournie dans Vue3, qui est utilisée pour transformer un objet réactif en un objet en lecture seule. L'utilisation de readonly peut garantir qu'un objet peut uniquement être lu mais pas modifié, améliorant ainsi la stabilité et la sécurité de l'application. 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

Dans Vue3, vous pouvez utiliser la fonction readonly pour convertir un objet en objet en lecture seule, par exemple :

<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>

Dans le code ci-dessus, l'objet state est converti en un objet en lecture seule, ce qui signifie que la propriété state.count peut uniquement être lue et non modifiée.

Il est à noter que la fonction readonly est récursive, c'est-à-dire que si un objet contient d'autres objets, alors ces objets seront également convertis en objets en lecture seule. Par exemple :

<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>

Dans le code ci-dessus, l'objet user est également converti en un objet en lecture seule, ce qui signifie state.user.name et state .user Les propriétés .age peuvent uniquement être lues, pas modifiées.

Il convient de noter que la fonction readonly ne peut convertir qu'un objet en un objet en lecture seule, mais ne peut pas convertir d'autres types de structures de données telles qu'un tableau ou une carte en un objet en lecture seule. Si vous devez convertir ces structures de données en objets en lecture seule, vous pouvez utiliser une combinaison de la fonction readonly et de la fonction deepReadonly. Par exemple :

<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>

Dans le code ci-dessus, le tableau items est converti en un tableau en lecture seule, et les objets qu'il contient sont également convertis en objets en lecture seule, ce qui signifie que le tableau et l'objet ne peut être que lu et ne peut pas être modifié.

Supplément : La fonction de flux de données unidirectionnel en lecture seule dans vue3 (explication détaillée de l'utilisation de la fonction lecture seule)

non défini

La fonction de flux de données unidirectionnel en lecture seule dans vue3 passe dans un objet (réactif ou ordinaire) ou ref et renvoie un proxy original en lecture seule de l'objet. Un proxy en lecture seule est « profond » et toutes les propriétés imbriquées dans l'objet sont également en lecture seule.

1. Remarque :

1. La fonction readonly copie les données définies par ref ou reactive et les transforme en données lisibles, c'est-à-dire qu'il n'y a pas de réponse

2. modifié, l'avertissement d'erreur sera signalé

Deuxièmement, réactif et en lecture seule

rrreee

Vous pouvez voir que la fonction "watchEffect" n'est déclenchée que deux fois, car la copie est en lecture seule.

3. ref et lecture seule

rrreee

Vous pouvez voir l'invite de la console comme suit :

"Échec de l'opération de définition sur la clé "valeur" : la cible est en lecture seule"

🎜🎜🎜🎜🎜4. et en lecture seule🎜rrreee🎜Vous pouvez voir que si nous continuons à cliquer sur le bouton pour opérer en ++, la console affichera une erreur, puis l'interface ne sera pas mise à jour car votre source de données ne répond pas. 🎜🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!