Kereaktifan Vue3 untuk tatasusunan "luaran".

Question

Semasa memindahkan aplikasi sedia ada dari Vue2 ke Vue3, saya menghadapi masalah yang mengejutkan.

Bagaimana untuk membuat Vue3 memantau perubahan tatasusunan "luaran"?

Ini berfungsi dengan baik dalam Vue2 tetapi berhenti berfungsi dalam 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>

Saya tahu saya boleh menghubungi app.dataArray.push 来代替，或者调用 $forceUpdate dan lain-lain, tetapi adakah cara untuk memaksa Vue menonton tatasusunan sedia ada?

Saya rasa soalan yang lebih luas ialah: Bagaimana untuk mengikat Vue3 ke objek JS tulen sewenang-wenangnya? Objek mungkin terlalu rumit untuk ditindih, atau ia mungkin datang daripada API luaran yang saya tiada kawalan. Ini mudah dalam Vue2 atau Angular (mengikat dua hala kepada mana-mana objek biasa, sama ada ia sebahagian daripada contoh/komponen atau tidak)

P.S. Ini kelihatan seperti perubahan besar dalam Vue3, tetapi ia tidak disebut di mana-mana.

Kemas kini:

Berdasarkan jawapan @Dimava, nampaknya cara paling tidak menyakitkan untuk membetulkan kod di atas ialah:

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

Answer 1

Anda perlu membuat tatasusunan anda 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 (atau ShallowReactive jika ia mengandungi banyak objek besar yang tidak sepatutnya bertindak balas atas sebab prestasi)