setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにするには、内部データとメソッドを返す必要があります。以前の vue2 では、data によって返されたデータを双方向バインディングに直接使用できました。setup 内のデータ型を双方向バインディングに直接バインドすると、変数がリアルタイムで応答できないことがわかります。次に、セットアップがデータの応答性をどのように実装するかを見てみましょう。

1. 参照

セットアップ内のカスタム属性はレスポンシブではないため、ref が導入されています。ref は、プロキシを介して属性値をプロキシにラップします。プロキシにはオブジェクトが含まれており、これにより基本的なタイプのデータがレスポンシブになります。使用する前に導入する必要があります。

例1: refの使用

<テンプレート>
 <div>
  <input type="text" v-model="気分">
  {{気分}}
 </div>
</テンプレート>
<スクリプト>
「vue」から{ref}をインポートします
エクスポートデフォルト{
 設定（）{
  let mood = ref("私は今、機嫌が悪いです!")
  タイムアウトを設定します(()=>{
   mood.value = "気分は人と同じくらい美しくなるべきです"
  },3000)
  戻る {
   気分
  }
 }
}
</スクリプト>

この時点で、セットアップテンプレートでムードを自由に編集して、リアルタイムの応答を確保できます。この例では、ref が次のように動作するため、気分値を変更するときに値が追加されます。

let mood = ref("私は今、機嫌が悪いです!")

次のように変更します: let mood = proxy({value:"私は今、機嫌が悪いです!"})

反応的

上記の ref は基本データ型をレスポンシブにしますが、参照型データに変更すると失敗します。そこで、リアクティブが導入されました。

Reactive は、基盤となるパッケージングを通じて参照型データをプロキシにラップします。使用原則は次のとおりです。

let me = 反応的({
 シングル:true、
 欲しいもの：「ストーブのように温かい人」
})

// 結果は let me = proxy : { single: true, want:"ストーブのように暖かい温かい男" }

引用するときは、me.want を使用してください。

例2: 反応的な使用

<テンプレート>
 <div>
  {{私.want}}
 </div>
</テンプレート>
<スクリプト>
「vue」から{ref、reactive}をインポートします。
エクスポートデフォルト{
 設定（）{
  let me = 反応的({
   シングル:true、
   欲しいもの：「ストーブのように温かい人」
  })
  タイムアウトを設定します(()=>{
   me.want = 「夏は溶けやすい」
  },3000)
  戻る {
   自分
  }
 }
}
</スクリプト>

vue2 のデータの応答性は、setup + ref + reactive を通じて完全に実現できるため、setup はデータを完全に置き換えることができます。

3. toRefs と toRef アプリケーション

setup + ref + reactive はデータの応答性を実装し、ES6 の構造化分解は使用できないため、応答性が失われます。したがって、toRefs の分解が必要であり、使用時に最初に導入する必要があります。

動作は次のように行われます。

「vue」から ref、reactive、toRefs をインポートします。
let me = 反応的({
 シングル:true、
 欲しいもの：「ストーブのように温かい人」
})
// 実行 let me = proxy : { single: true, want:"ストーブのように暖かい男" }

const { single, want } = toRefs( me )
// 単一として実行: proxy({ value:true })
欲しいもの：proxy({ value:"ストーブのように暖かい男" })

toRefs は単一のプロキシと 2 つのプロキシに分解するため、応答性が高くなります。

例3: toRefsによるデータの分解

<テンプレート>
 <div>
  {{欲しい}}
  <input type="text" v-model="want">
 </div>
</テンプレート>
<スクリプト>
「vue」から ref、reactive、toRefs をインポートします。
エクスポートデフォルト{
 設定（）{
  let me = 反応的({
   シングル:true、
   欲しいもの：「ストーブのように温かい人」
  })
  タイムアウトを設定します(()=>{
   me.want = 「夏は溶けやすい」
  },3000)
  // 分解 const {single,want} = toRefs(me)
   戻る {
    シングル、
    欲しい
   }
  }
}
</スクリプト>

toRef 関数: オブジェクトのプロパティを参照として返します。わかりにくいですが、結果を印刷して表示すると理解しやすくなります。

let me = 反応的({
 シングル:true、
 欲しいもの：「ストーブのように温かい人」
})
lv = toRef(私、'愛')とします。
console.log('愛',愛);
//結果を印刷する ObjectRefImpl {
 __v_isRef: 真
 _key: 「愛」
 _object: プロキシ {single: true、want: "ストーブのように暖かい男性"}
 値: 未定義
 [[プロトタイプ]]: オブジェクト
}

toRef は、コンポーネント間で値を渡したり、オプションのパラメータを処理したりするために使用されます。実行すると、まず、愛が me に存在するかどうかを確認します。存在する場合は、愛を me に継承します。存在しない場合は、愛を作成し、それを分解して変数 lv に割り当てます。

例4: toRefの使用

<テンプレート>
 <div>
  {{欲しい}}
 <input type="text" v-model="want">
</div>
</テンプレート>
<スクリプト>
「vue」から { ref 、 reactive 、 toRefs 、 toRef } をインポートします。
エクスポートデフォルト{
 設定（）{
  let me = 反応的({
   シングル:true、
   欲しいもの：「ストーブのように温かい人」
  })
 タイムアウトを設定します(()=>{
  me.want = 「夏は溶けやすい」
 },3000)
 const { single, want } = toRefs(me)
 const 愛 = toRef(私、'愛')
 console.log('愛',愛);
 戻る {
  シングル、
  欲しい
  }
 }
}
</スクリプト>