"외부" 배열에 대한 Vue3 반응성
기존 애플리케이션을 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>