Réactivité Vue3 pour les tableaux "externes"

Question

Lors du portage d'une application existante de Vue2 vers Vue3, j'ai rencontré un problème surprenant.

Comment effectuer les modifications du moniteur Vue3 du tableau « externe » ?

Cela a bien fonctionné dans Vue2 mais a cessé de fonctionner dans Vue3 :

<ul id="list">
    <li v-for="t in dataArray"> {{t}} </li>
</ul>

<script>
    var numbers = [1,2,3]; //this is my external array

    var app = Vue.createApp({
        data() { return { dataArray : numbers } } //bind Vue to my external array
    }).mount("#list");

    numbers.push(4); //UI not updating, but worked fine in Vue2

</script>

Je sais que je peux appeler app.dataArray.push 来代替，或者调用 $forceUpdate etc, mais existe-t-il un moyen de forcer Vue à simplement regarder le tableau existant ?

Je suppose que la question plus large est la suivante : comment lier Vue3 à des objets JS purs arbitraires ? L'objet est peut-être trop complexe pour être remplacé ou il peut provenir d'une API externe sur laquelle je n'ai aucun contrôle. C'est simple dans Vue2 ou Angular (liaison bidirectionnelle à n'importe quel objet normal, qu'il fasse partie d'une instance/composant ou non)

P.S. Cela ressemble à un énorme changement radical dans Vue3, mais il n'est mentionné nulle part.

Mise à jour :

D'après la réponse de @Dimava, il semble que le moyen le moins pénible de corriger le code ci-dessus est :

var numbers = [1,2,3]; //this is my external array
numbers = Vue.shallowReactive(numbers); //convert to a reactive proxy

Answer 1

Vous devez réaliser votre tableau Reactive 1

import { reactive, ref } from 'vue'   
const numbers = [1,2,3];
const reactiveNumbers = reactive(numbers)
reactiveNumbers.push(4)

// or, if you will need to reassign the whole array
const numbersRef = ref(numbers)
numbersRef.value.push(4)
numbersRef.value = [3, 2, 1]

// or, in the old style, if you are old
const data = reactive({
  numbers: [1, 2, 3]
})
data.numbers.push(4)
data.numbers = [3, 2, 1]

1 (ou ShallowReactive s'il contient beaucoup d'objets volumineux qui ne devraient pas répondre pour des raisons de performances)