Vue 3 における Ref と React?

Question

<p>何人かの人の Vue 3 プレビュー チュートリアルからいくつかの例を確認してください。 [現在ベータ版]</p> <p>2 つの例を見つけました:</p>

反応式

<pre class="brush:js;toolbar:false;"><テンプレート> <ボタン @click="増分"> カウント: {{ state.count }}、double : {{ state.double }} </ボタン> </テンプレート> <スクリプト> import { reactive, computed } from 'vue' デフォルトのエクスポート { 設定（） { const state = リアクティブ({ カウント: 0、 double: computed(() => state.count * 2) }) 関数インクリメント() { 状態.カウント } 戻る { 州、 インクリメント } } } </スクリプト> </pre> <h2>参照</h2> <pre class="brush:js;toolbar:false;"><テンプレート> <div> <h2 ref="titleRef">{{ formattedMoney }}</h2> <input v-model="delta" type="number"> <button @click="追加">追加</button> </div> </テンプレート> <スクリプト> import { ref, computed, onMounted } from "vue"; デフォルトのエクスポート { セットアップ(小道具) { //州 const お金 = ref(1); const デルタ = ref(1); // 参照 const titleRef = ref(null); // 計算された小道具 const formattedMoney = computed(() =>money.value.toFixed(2)); //フック onMounted(() => { console.log("titleRef", titleRef.value); }); // メソッド const add = () => (money.value = Number(delta.value)); 戻る { デルタ、 お金、 タイトル参照、 フォーマットされたお金、 追加 }; } }; </スクリプト> </pre> <p><br /></p>

Answer 1

ref と reactive には、どちらもデータを保存する方法を提供し、データをリアクティブにできるという点でいくつかの類似点があります。

＃＃＃しかし：＃＃＃

高レベルの違い:

リーリー

出典: Vue フォーラムのディスカッション

< /p>反応式

reactive

オブジェクトを取得し、リアクティブ proxy を元のオブジェクトに返します。 ＃＃＃＃＃＃例＃＃＃＃＃＃ リーリー

イラスト

上記では、

page

のプロパティを変更またはアクセスしたい場合は常に、 たとえば、page.ads

、

page.filteredAds はプロキシを通じて更新されます。

Answer 2

ポイント

• reactive() オブジェクトのみを受け入れます。 JS プリミティブは受け入れません (文字列、ブール値、数値、BigInt、シンボル、null、未定義) < /里>
• ref() 舞台裏での呼び出し reactive()
• reactive() はオブジェクトに対して動作し、ref() は reactive() を呼び出すため、オブジェクトは両方の に対して動作します。
ただし、
• ref() には再割り当て用の .value 属性があり、reactive() にはこの属性がないため、再割り当てできません < /里> ＃＃＃使用＃＃＃

ref()

いつ..

これはプリミティブ

(例:

'string'
• 、true、23 など) これは、後で再割り当てする必要があるオブジェクトです (配列など - 詳細はこちら
)
reactive()

いつ..

これは再割り当てする必要のないオブジェクトであり、

ref()

• のオーバーヘッドを回避したいと考えています。 要約

ref()

は、すべてのオブジェクト タイプをサポートし、

.value を使用した再割り当てができるため、最適な方法のようです。 ref() は良い出発点ですが、API に慣れると、reactive() の方がオーバーヘッドが少なく、より機能的であることがわかります。あなたの要望。 ref()

使用例

プリミティブの場合は常に ref()

を使用しますが、

ref() は再割り当てが必要なオブジェクト (配列など) に役立ちます。 リーリー 上記の reactive()

では、オブジェクト全体ではなくプロパティを再割り当てする必要があります。

リーリー reactive()

使用例

reactive() の良い使用例は、一緒に属するプリミティブのセットです: リーリー

上記のコードは、上記のコードよりも論理的であるように感じられます

リーリー

役立つリンク

まだ迷っている場合は、この簡単なガイドが役立ちます:

https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

ref() の引数のみを使用します:

https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c

reactive() と

ref()

の背後にある決定とその他の重要な情報は、Vue Comboposition API RFC に記載されています: https://vuejs.org/guide/エクストラ /composition-api-faq. html#why-composition-api