Vue3-Reaktivität für „externe“ Arrays

Question

Beim Portieren einer vorhandenen Anwendung von Vue2 nach Vue3 bin ich auf ein überraschendes Problem gestoßen.

Wie kann Vue3 Änderungen am „externen“ Array überwachen?

Das hat in Vue2 gut funktioniert, funktioniert aber in Vue3 nicht mehr:

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

Ich weiß, dass ich app.dataArray.push 来代替，或者调用 $forceUpdate usw. aufrufen kann, aber gibt es eine Möglichkeit, Vue zu zwingen, einfach das vorhandene Array zu beobachten?

Ich denke, die umfassendere Frage ist: Wie bindet man Vue3 an beliebige reine JS-Objekte? Das Objekt ist möglicherweise zu komplex, um es zu überschreiben, oder es stammt möglicherweise von einer externen API, über die ich keine Kontrolle habe. Dies ist in Vue2 oder Angular einfach (bidirektionale Bindung an jedes normale Objekt, unabhängig davon, ob es Teil einer Instanz/Komponente ist oder nicht)

P.S. Das sieht nach einer großen bahnbrechenden Änderung in Vue3 aus, wird aber nirgendwo erwähnt.

Update:

Basierend auf der Antwort von @Dimava sieht es so aus, als wäre die am wenigsten schmerzhafte Möglichkeit, den obigen Code zu reparieren:

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

Answer 1

您需要使您的数组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（或ShallowReactive，如果它包含大量出于性能原因不应响应的大对象）