Vue3 ref リアクティブ応答データ割り当ての問題

会ったときに録画してます最終更新日時 23.8.30

シナリオ 1: 応答データを要求されたデータに割り当てる

エラーのデモ: 直接代入

配列を例にとると、同じ操作がオブジェクトにも適用されます。

let list = ref([])
//let list = reactive([])
async function getList() {
    
    
    list = await httpGetList();  // 直接赋值错误
}
// 请求
function httpGetList() {
    
    
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([1, 2, 3, 4, 5])
        }, 500)
      })
}

ref定義されたプロパティはと同等であるreactive（{value:xxx})ため、reactive、ref参照アドレスが変更されているため、直接再割り当てを行うと応答が失われます。

正しいスペル

方法 1:ref.valueコードは応答データをより明確に表示します。

list.value = await httpGetList();

方法 2: 1 つのレイヤーをラップします。モジュールの変数をvue2 のデータとしてreactive1 つのレイヤーにラップできます。reactive

let data = reactive({
    
    
	list:[]
})
async function getList() {
    
    
    data.list = await httpGetList();
}

ref定義された属性はと同等でありreactive（{value:xxx})、メソッド 2 は実際にはこのメソッドを参照します。

方法 3: 方法 1 と方法 2 の方が推奨されます

let list = reactive([])
    
async function getList2() {
    
    
    let resp = await httpGetList()
    list.push(...resp)
}

シナリオ 2: 応答性の高いデータの分解後の応答性の喪失

原因分析

reactive の内部実装は、プロキシオブジェクト Proxy を作成し、一連の処理を実行します。リアクティブ損失の影響は Vue ではなく、Proxy オブジェクト自体にあります。
デコンストラクションは、変数を新しい変数に再代入する（基本データの値を渡す、参照型のアドレスを渡す）ことと同じなので、デコンストラクション後の基本データは応答で失われます。分解後も参照型であれば、操作に相当するアドレスはProxyによって監視されているため、応答性が失われることはありません。

たとえば
、分解が基本型のデータである場合、分解は値をコピーすることと同じです。アクセス中に直接アクセスされたコピー値はプロキシをスキップするため、合計はトリガーされませgetんset。
ここに画像の説明を挿入

解決策 toRefs/toRef メソッドは ref 参照オブジェクトを作成します。

代入の分解は主に代入です！基本データ型の場合、関数が渡されるかオブジェクトが構造化されると、元のデータへの参照が失われます。、

toRef(响应式对象，该对象的属性)値がref对象パラメータオブジェクトのプロパティを指すを作成します。ref オブジェクトの値が変更されると、パラメータオブジェクトのプロパティも変更され、同じアドレスを指すため、その逆も同様です。本質は参照であり、元のデータに関連付けられています。该ref对象value
toRefs(obj): パラメータと一致する通常のオブジェクトを返します。ただし、属性の値が ref オブジェクトになる点が異なります。これは、各属性を 1 回実行するのと同じですtoRef。