vue3 reactive assignment problem
In vue3, the directly assigned value of the entire reactive object cannot be detected directly.
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// Assignment above cannot be detected because the responsiveness is its attribute, not itself
// If necessary, assign values to reactive// Method 1: Single assignmentobj['name'] = 'lisi';
obj['age'] = '';
// Method 2: Pack one more layerlet obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
= {
name: 'lisi'
age: ''
}vue3 reactive pit
Recently, I found that there were some problems with Reactive during the process of using vue3
When clearing the array defined by reactive, you must set length to 0. It is useless to directly assign an empty array. Similarly, directly assigning an empty object to directly assign an empty object. You can only traverse the objects one by one. The unfunctional one is said here, it cannot be responsively updated pages. If you print it, you can see that it has indeed been deleted, but the page has not changed.
Clear the array
// Error example<template>
<div>{{ arr }}</div>
<button @click="click">Click</button>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
arr = []
(arr) // The result printed here is a normal empty array}
</script>// Correct example<template>
<div>{{ arr }}</div>
<button @click="click">Click</button>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
= 0 // Here is the opposite of vue2. It is invalid to set the array length to 0 directly by vue2. (arr)
}
</script>Clear the object
// Error example<template>
<div>{{ obj }}</div>
<button @click="click">Click</button>
</template>
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
obj = {}
(obj) // The result printed here is a normal empty object}
</script>// Error example<template>
<div>
<div>{{ obj }}</div>
<button @click="click">Click</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
for (let i in obj) {
delete obj[i]
}
(obj) // The result printed here is a normal empty array}
</script>The same is true that it is not possible to directly assign values. Arrays can only use certain methods of arrays, or directly modify the index. Modifying the index is the opposite of vue2. Vue2 only modifying the index items has no effect. The object can directly use dot syntax, and directly assigning an object has no effect.
In fact, these problems can be solved by using ref, but the official recommendation is to use reactive. . . .
The above is personal experience. I hope you can give you a reference and I hope you can support me more.