何人かの人の 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 }}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃しかし：＃＃＃ 高レベルの違い:refとreactiveには、どちらもデータを保存する方法を提供し、データをリアクティブにできるという点でいくつかの類似点があります。リーリー
出典: Vue フォーラムのディスカッション反応式
reactive
オブジェクトを取得し、リアクティブ
イラストproxyを元のオブジェクトに返します。＃＃＃＃＃＃例＃＃＃＃＃＃ リーリー上記では、
pageのプロパティを変更またはアクセスしたい場合は常に、たとえば、page.ads
、page.filteredAds
はプロキシを通じて更新されます。ポイント
reactive()オブジェクトのみを受け入れます。JS プリミティブは受け入れません(文字列、ブール値、数値、BigInt、シンボル、null、未定義)舞台裏での呼び出しreactive()はオブジェクトに対して動作し、ref()はreactive()を呼び出すため、オブジェクトは両方のに対して動作します。には再割り当て用の.value属性があり、reactive()にはこの属性がないため、再割り当てできません＃＃＃使用＃＃＃ref()
いつ..
(例:これはプリミティブ'string'- 、true
)
いつ..、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