Vue3은 Vue2처럼 클래스 필드의 내부 업데이트에 반응하지 않습니다.

Question

Vue2에서는 요소를 클래스의 속성에 바인딩할 수 있으며 Vue 세계 외부에서 해당 속성이 변경되면 요소가 업데이트된다는 점을 확인했지만 Vue3에서는 가능하지 않은 것 같습니다.

여기서 의미를 설명하기 위해 두 가지 간단한 예를 만들었습니다.

Vue2: https://codesandbox.io/s/vue2-6hztv

Vue3: https://codesandbox.io/s/vue3-o2rfn

클래스 필드를 증가시키는 내부 타이머가 있는 클래스가 있습니다. Vue2에서는 myClass.field에 바인딩된 요소가 올바르게 업데이트되지만 Vue3에서는 아무 일도 일어나지 않습니다.

내 질문은

<强>1. 여기서 Vue2와 Vue3 사이에 차이점이 있는 이유는 무엇입니까?

<强>2. Vue2 예제와 같은 것을 Vue3에서 어떻게 달성할 수 있나요?

Vue 라이프사이클 메서드 내에서는 타이머를 실행할 수 없습니다. 클래스 필드는 스스로 업데이트되어야 합니다.

작동하지 않는 Vue3 코드는 다음과 같습니다.

HTML:

으아악

자바스크립트：

<div id="app">{{ myClass.field }}</div>

Answer 1

Vue 3에서 프록시 객체를 생성하여 이 답변에 설명된 대로 반응성을 활성화합니다. 생성자의 this는 프록시가 아닌 원래 클래스 인스턴스를 참조하므로 반응할 수 없습니다.

해결책은 클래스 생성자와 this반응성이 있을 것으로 예상되는 부작용 설정을 분리하는 것입니다. 설정 방법을 사용하면 유창한 인터페이스 패턴이 가능해 사용이 더 쉬워집니다.

으아아아

옵션 API에서는 다음과 같습니다:

으아아아

컴포지션 API에서는 다음과 같습니다::

으아아아