Vue3でshallowRefとshallowReactiveを使用する方法

shallowRef 関数とshallowReactive

• shallowRef 関数は、基本型データのみを処理します。

• shallowReactive 関数は、データの最初の層のみを処理します。

• 使用する場合は両方を導入する必要があります。

上記の内容がまだ理解できませんでしたか?大丈夫ですので、まずは上記の3つを覚えてから、詳しく説明してください。

前回のブログでref関数とreactive関数についてお話しましたが、データをレスポンシブデータに変換する機能で、データが変更された際にリアルタイムにページ上に表示することができ、基本データもリアルタイムにページ上に表示できます。

しかし問題があります。データをレスポンシブ データに変更すると、ref 関数を使用するかリアクティブ関数を使用するかにかかわらず、どちらも詳細な監視になります。これは何を意味しますか?これはreactiveでラップされたオブジェクトであり、レイヤーが100ある場合、つまり100の属性を連続してクリックした場合でも、最も深いデータを監視できますが、この場合には問題が発生します。

ディープ モニタリングの問題:

• ref 関数とリアクティブ関数は両方ともディープ モニタリングです。

• データの量が大きすぎると、非常にパフォーマンスが消費されます。

• データを深く監視する必要がない場合は、shallowRef 関数とshallowReactive 関数を使用できます。 ＃＃＃＃＃＃＃＃＃＃＃＃わかりますか？理解できなくても大丈夫、いくつかの事例を通して理解していきます。

shallowReactive 非深度モニタリングを使用する

shallowReactive 関数はデータの最初の層のみを処理できることに注意してください

。

ページに個人情報表示があり、名前と年齢が表示されるとします。データはboyオブジェクトに保存されており、年齢はboyオブジェクトのnews属性の下にあります。つまり、深いですが、名前は男の子のオブジェクトの下、つまり最初のレイヤーにあり、名前と年齢をそれぞれ変更して、どのような効果が得られるかを確認するための 2 つのボタンがあります。

<template>
  <div>
    <h2 id="姓名-name">姓名：{{name}}</h2>
    <h2 id="年龄-news-age">年龄：{{news.age}}</h2>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowReactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowReactive({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.name = "????????.";
    };

    const btn2 = () => {
      boy.news.age++;
    };

    return { ...toRefs(boy), btn, btn2 };
  }
};
</script>

2 つのボタンをそれぞれクリックして、ページの変化を確認してみましょう。

#エフェクトを通して、少しまとめてみましょう:

shallowReactive はデータの最初の層のみをラップします

• デフォルトでは、データの最初の層のみをリッスンできます。

• 複数のレイヤーのデータを変更する場合は、最初に最初のレイヤーのデータを変更し、次に他のレイヤーのデータを変更する必要があります。その場合にのみ、ビュー上のデータが変更されます。

• 深度以外のモニタリングにはshallowRefを使用する
  冒頭で述べたように、
shallowRef関数は基本型のデータしか処理できません

なぜでしょうか? ShallowRef 関数は、.value の変更を監視します。これはデータの最初の層の変更ではありません。したがって、shallowRef で作成したデータを変更したい場合は、xxx.value = XXX にする必要があります。

コードを見てください:

<template>
  <div>
    <h2 id="姓名-boy">姓名：{{boy}}</h2>
    <button @click="btn">修改boy</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef("我是????????.");

    const btn = () => {
      boy.value = "????????.";
    };

    return { boy, btn };
  }
};
</script>

ボタンをクリックしてboyの値を変更します。

上のスクリーンショットからわかるように、データは正常に変更できます。

それでは疑問が残ります: shallowRef 関数は基本型データのみを処理しますか?

次のケースを見てください:

<template>
  <div>
    <h2 id="姓名-boy-name">姓名：{{boy.name}}</h2>
    <h2 id="年龄-boy-news-age">年龄：{{boy.news.age}}</h2>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.value.name = "????????.";
    };

    const btn2 = () => {
      boy.value.news.age++;
    };

    return { boy, btn, btn2 };
  }
};
</script>

このコードでは、オブジェクトをshallowRefでラップし、ページ上に名前と年齢を表示してから、名前と年齢を変更します。ボタンをクリックして、ページの効果を確認してください。

したがって、

shallowRef 関数は基本型データ

のみを処理できます。

以上がVue3でshallowRefとshallowReactiveを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。