Countis:{{state.count}},doubleis:{{state.double}}
何人かの人の Vue 3 プレビュー チュートリアルからいくつかの例を確認してください。 [現在ベータ版]
2 つの例を見つけました:
<テンプレート> <ボタン @click="増分"> カウント: {{ state.count }}、double : {{ state.double }} ボタン> テンプレート> <スクリプト> import { reactive, computed } from 'vue' デフォルトのエクスポート { 設定() { const state = リアクティブ({ カウント: 0、 double: computed(() => state.count * 2) }) 関数インクリメント() { 状態.カウント } 戻る { 州、 インクリメント } } } スクリプト>
<テンプレート>テンプレート> <スクリプト> 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)); 戻る { デルタ、 お金、 タイトル参照、 フォーマットされたお金、 追加 }; } }; スクリプト>{{ formattedMoney }}
###しかし:### 高レベルの違い:ref
とreactive
には、どちらもデータを保存する方法を提供し、データをリアクティブにできるという点でいくつかの類似点があります。リーリー
出典: Vue フォーラムのディスカッション反応式
reactive
オブジェクトを取得し、リアクティブ
イラストproxy
を元のオブジェクトに返します。######例###### リーリー
上記では、
pageのプロパティを変更またはアクセスしたい場合は常に、たとえば、page.ads
、page.filteredAds
はプロキシを通じて更新されます。
ポイント
reactive()
オブジェクトのみを受け入れます。JS プリミティブは受け入れません(文字列、ブール値、数値、BigInt、シンボル、null、未定義)舞台裏での呼び出し
reactive()はオブジェクトに対して動作し、
ref()は
reactive()を呼び出すため、オブジェクトは両方の
に対して動作します。には再割り当て用の
.value属性があり、
reactive()にはこの属性がないため、再割り当てできません
###使用###ref()
いつ..
(例:これはプリミティブ
'string'- 、true
)
reactive()
いつ..、
23など)
これは、後で再割り当てする必要があるオブジェクトです (配列など -詳細はこちら
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
ref()reactive()と
の背後にある決定とその他の重要な情報は、Vue Comboposition API RFC に記載されています:
https://vuejs.org/guide/エクストラ /composition-api-faq. html#why-composition-api