"외부" 배열에 대한 Vue3 반응성

Question

기존 애플리케이션을 Vue2에서 Vue3으로 포팅하던 중 놀라운 문제에 직면했습니다.

"외부" 어레이의 Vue3 모니터 변경을 수행하는 방법은 무엇입니까?

Vue2에서는 제대로 작동했지만 Vue3에서는 작동이 중지되었습니다.

으아아아

app.dataArray.push 来代替，或者调用 $forceUpdate 등을 호출할 수 있다는 것을 알고 있지만 Vue가 단순히 기존 배열을 보도록 강제할 수 있는 방법이 있나요?

더 넓은 질문은 Vue3을 임의의 순수 JS 객체에 바인딩하는 방법입니다. 객체가 너무 복잡해서 재정의할 수 없거나 내가 제어할 수 없는 외부 API에서 나올 수도 있습니다. 이는 Vue2 또는 Angular에서 간단합니다(인스턴스/컴포넌트의 일부인지 여부에 관계없이 모든 일반 객체에 대한 양방향 바인딩)

P.S. 이것은 Vue3에서 엄청난 변화처럼 보이지만 어디에도 언급되지 않았습니다.

업데이트:

@Dimava의 답변에 따르면 위 코드를 수정하는 가장 고통스럽지 않은 방법은 다음과 같습니다.

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

Answer 1

배열을 만들어야 합니다 Reactive 1

으아악

1(또는 ShallowReactive 성능상의 이유로 응답하면 안 되는 큰 개체가 많이 포함된 경우)