text
vue3 uses proxy, and cannot directly assign the entire object or array. Specific reasons: The reactive object declared by the reactive is proxyed by arr. Operation of the proxy object requires the prefix of the proxy object. Direct overwriting will result in a loss of responsiveness.
Array assignment
// Scheme 1: Create a responsive object whose properties are arraysconst state = reactive({
arr: []
});
= [1, 2, 3]
// Scheme 2: Use the ref functionconst state = ref([])
= [1, 2, 3]
// Scheme 3: Use the push method of arrayconst arr = reactive([])
(...[1, 2, 3])Object assignment
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// Direct assignment cannot be detected because the responsiveness is its attribute, not itself// Method 1: Single assignmentobj['name'] = 'lisi';
obj['age'] = '';
// Method 2: Create a responsive objectlet obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
= {
name: 'lisi'
age: ''
}The above is the detailed content of the solution example of the vue3 array or object assignment not updated. For more information on the vue3 array object assignment update, please pay attention to my other related articles!