La documentation officielle de Vue3 indique :
reactive() renvoie un proxy réactif pour un objet
La méthode réactive doit donc agir sur un objet Object. Si vous souhaitez utiliser un tableau, vous devez l'envelopper :
let list = reactive({
data: [{
id: 01, name: 'XXX'}]
})
Ou utilisez la réf :
let list = ref([{
id: 1, name: 'Andy'}])
Le code de l'auteur original a été cité ci-dessous :
import {
reactive, ref } from 'vue'
export default {
setup() {
// 需要一个带默认值的数组list;
let list = reactive([{
id: 1, name: 'Andy'}])
// 每次触发事件重置list，把新值放入,此种方式不会触发视图更新
const checkBtn = () => {
// 此时重置操作 地址指向变成一个新的地址，不会触发视图更新
list = [{
id: 1, name: 'Andy'}]
list.push({
id: 2, name: 'Lucy'})
}
// --------------------------------------------------
// 正确的重置处理方法如下：使用reactive将数组包裹到一个对象中
let list = reactive({
data: [{
id: 1, name: 'Andy'}]
});
const checkBtn = () => {
list.data = [{
id: 1, name: 'Andy'}]
list.data.push({
id: 2, name: 'Lucy'})
}
// 或者使用ref
let list = ref([{
id: 1, name: 'Andy'}]);
const checkBtn = () => {
list.value = [{
id: 1, name: 'Andy'}]
list.value.push({
id: 2, name: 'Lucy'})
}
return {
list,
checkBtn
}
},
}
——————————————
Déclaration de droits d'auteur : cet article est un article original rédigé par le blogueur CSDN « internaute ordinaire » et suit l'accord de droits d'auteur CC 4.0 BY-SA. Veuillez joindre le lien source original et ceci copie lors de la réimpression de la déclaration.
Lien d'origine : https://blog.csdn.net/Ajekseg/article/details/123375893