“外部”數組的 Vue3 反應性

Question

在將現有應用程式從 Vue2 移植到 Vue3 時，我遇到了一個令人驚訝的問題。

如何讓 Vue3 監視「外部」陣列的變化？

這在 Vue2 中運作得很好，但在 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>

我知道我可以呼叫 app.dataArray.push 來代替，或是呼叫 $forceUpdate 等，但是有沒有辦法強制 Vue 簡單地監視現有陣列？

我想更廣泛的問題是：如何將 Vue3 綁定到任意純 JS 物件？該物件可能太複雜而無法重寫，或者可能來自我無法控制的外部 API。這在 Vue2 或 Angular 中很簡單（與任何普通物件的雙向綁定，無論它是否是實例/元件的一部分）

附註這看起來像是 Vue3 中的一個巨大的突破性變化，但在任何地方都沒有提到。

更新：

根據 @Dimava 的回答，看起來修復上述程式碼最不痛苦的方法是：

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，如果它包含大量出於效能原因不應回應的大物件）