shallowRef 関数は、基本型データのみを処理します。
shallowReactive 関数は、データの最初の層のみを処理します。
使用する場合は両方を導入する必要があります。
上記の内容がまだ理解できませんでしたか?大丈夫ですので、まずは上記の3つを覚えてから、詳しく説明してください。
前回のブログでref関数とreactive関数についてお話しましたが、データをレスポンシブデータに変換する機能で、データが変更された際にリアルタイムにページ上に表示することができ、基本データもリアルタイムにページ上に表示できます。
しかし問題があります。データをレスポンシブ データに変更すると、ref 関数を使用するかリアクティブ関数を使用するかにかかわらず、どちらも詳細な監視になります。これは何を意味しますか?これはreactiveでラップされたオブジェクトであり、レイヤーが100ある場合、つまり100の属性を連続してクリックした場合でも、最も深いデータを監視できますが、この場合には問題が発生します。
ディープ モニタリングの問題:
ref 関数とリアクティブ関数は両方ともディープ モニタリングです。
データの量が大きすぎると、非常にパフォーマンスが消費されます。
データを深く監視する必要がない場合は、shallowRef 関数とshallowReactive 関数を使用できます。 ############わかりますか?理解できなくても大丈夫、いくつかの事例を通して理解していきます。
ページに個人情報表示があり、名前と年齢が表示されるとします。データはboyオブジェクトに保存されており、年齢はboyオブジェクトのnews属性の下にあります。つまり、深いですが、名前は男の子のオブジェクトの下、つまり最初のレイヤーにあり、名前と年齢をそれぞれ変更して、どのような効果が得られるかを確認するための 2 つのボタンがあります。 <template>
<div>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{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>
#エフェクトを通して、少しまとめてみましょう:
shallowReactive はデータの最初の層のみをラップします<template> <div> <h2>姓名:{{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>
上のスクリーンショットからわかるように、データは正常に変更できます。
それでは疑問が残ります: shallowRef 関数は基本型データのみを処理しますか?
次のケースを見てください:<template> <div> <h2>姓名:{{boy.name}}</h2> <h2>年龄:{{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 関数は基本型データのみを処理できます。
以上がVue3でshallowRefとshallowReactiveを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。