javascript - Vue의 종속성은 단방향 데이터 바인딩입니까 아니면 양방향 바인딩입니까?

Question

공식 웹사이트 문서에서 언급했듯이 Vue의 v-model 지시문은 데이터의 양방향 바인딩을 구현합니다.

https://vuejs.org/v2/guide/fo...

그러나 실제 개발에서는 컴포넌트의 데이터 흐름이 단방향이므로 하위 컴포넌트가 상위 컴포넌트의 props를 수정하는 것은 권장되지 않습니다.

그래서 문제는 Vue의 종속성 추적이 [원칙적으로 양방향 바인딩을 지원하지만 개발 편의를 위해 단방향 데이터 흐름만 권장합니다] 또는 [원칙적으로 양방향 바인딩을 지원하지 않고 v-model DOM을 수신하는 것입니다. 이벤트 구현을 위한 구문 설탕은 어떻습니까?

Answer 1

Vue의 종속성 추적은 [원칙적으로 양방향 바인딩은 지원되지 않습니다. v-model은 DOM 이벤트를 수신하여 구현된 구문 설탕일 뿐입니다]

Vue의 종속성 추적은 Object.defineProperty를 통해 데이터 객체의 모든 속성을 getter/setter로 변환하여 구현됩니다. 데이터의 특정 속성 값이 변경되면 set 함수가 트리거되고 속성 값을 얻으면 get 함수가 트리거됩니다. 이 기능을 통해 데이터가 변경될 때 뷰가 변경될 수 있습니다. 즉, 데이터가 변경될 때만 뷰 변경이 트리거됩니다. DOM 이벤트를 통해서만 변경할 수 있으며 뷰는 양방향 바인딩을 달성하는 데 사용됩니다.

일반적인 과정은 다음과 같습니다

으아악

양방향 바인딩은 동일한 구성 요소 내에서 데이터와 뷰를 바인딩하는 것이며 상위 구성 요소와 하위 구성 요소 간의 통신과 관련이 없습니다.

구성 요소 간의 통신은 구성 요소 간의 더 나은 이해를 위해 단방향 데이터 흐름을 사용합니다. 개발 중에 상위 구성 요소의 특정 데이터에 의존하는 여러 하위 구성 요소가 있을 수 있습니다. 하위 구성 요소가 상위 구성 요소의 데이터를 수정할 수 있는 경우 하위 구성 요소를 변경하면 해당 하위 구성 요소를 사용하는 모든 하위 구성 요소가 변경됩니다. 따라서 Vue는 하위 구성 요소를 권장하지 않습니다. 구성 요소가 상위 구성 요소의 데이터를 수정하는 경우 props를 직접 수정하면 경고가 발생합니다