Countis:{{state.count}},doubleis:{{state.double}}
Vue 3 における Ref と React?
P粉743288436
P粉743288436 2023-08-27 20:35:30
0
2
425

何人かの人の Vue 3 プレビュー チュートリアルからいくつかの例を確認してください。 [現在ベータ版]

2 つの例を見つけました:

反応式

<テンプレート> <ボタン @click="増分"> カウント: {{ state.count }}、double : {{ state.double }}   <スクリプト> import { reactive, computed } from 'vue' デフォルトのエクスポート { 設定() { const state = リアクティブ({ カウント: 0、 double: computed(() => state.count * 2) }) 関数インクリメント() { 状態.カウント } 戻る { 州、 インクリメント } } }  

参照

<テンプレート> 

{{ formattedMoney }}

<スクリプト> 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)); 戻る { デルタ、 お金、 タイトル参照、 フォーマットされたお金、 追加 }; } };


P粉743288436
P粉743288436

全員に返信 (2)
P粉231112437

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

###しかし:###

高レベルの違い:

リーリー

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

反応式

reactive

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

イラスト

上記では、

page

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

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

いいねを押す+0
    P粉482108310

    ポイント

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

    ref()

    いつ..

    これはプリミティブ

    (例:
      'string'
    • true23など)これは、後で再割り当てする必要があるオブジェクトです (配列など -詳細はこちら
    • )
    • 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

    いいねを押す+0
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!