Vue3 ref reactive response data assignment problem

doing Record when you meet, last update time 23.8.30

Scenario 1: Assign responsive data to the requested data

Error demonstration: direct assignment

Taking arrays as an example, the same operation applies to objects.

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)
      })
}

refThe defined property is equivalent to reactive（{value:xxx}), so reactive、refdirect reassignment loses response because the reference address has changed

correct spelling

Method 1: ref.value, the code shows the responsive data more clearly

list.value = await httpGetList();

Method 2: Wrap one layer reactive, you can wrap the variables of a module in one reactive, as the data of vue2

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

refThe defined attribute is equivalent to reactive（{value:xxx}), method 2 actually refers to this method.

Method 3: Method 1 and Method 2 are more recommended

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

Scenario 2: Loss of responsiveness after responsive data deconstruction

Cause Analysis

The internal implementation of reactive is to create a proxy object Proxy and perform a series of processing. The reactive loss effect is not in Vue but in the Proxy object itself.
Deconstruction is equivalent to reassigning the variable to a new variable ( passing the value of the basic data, passing the address of the reference type ), so after the deconstruction is a basic data, it will be lost in response. If it is a reference type after deconstruction, the address equivalent to the operation is still supervised by the Proxy, so the responsiveness will not be lost.

Case
For example, after deconstruction is the data of the basic type, then deconstruction is equivalent to copying a value. The copy value accessed directly during access skips the proxy, so the sum will not be gettriggered set.
insert image description here

Solution The toRefs/toRef method creates a ref reference object

Destructuring assignment is mainly assignment! For basic data types, the reference to the original data will be lost when the function is passed or the object is destructured. ,

toRef(响应式对象，该对象的属性)Create one ref对象, 该ref对象whose valuevalue points to a property in the parameter object
. When the value of the ref object changes, the property in the parameter object will also change, and vice versa, because it points to the same address! The essence is a reference, which is associated with the original data
toRefs(obj): Returns an ordinary object consistent with the parameter, except that the value of the attribute becomes a ref object, which is equivalent to executing each attribute once toRef.