vue에서 단일 구성 요소의 데이터를 동적으로 수정할 때 모든 다시 렌더링을 구현하는 방법

이제 단일 Vue 구성 요소에서 데이터를 동적으로 수정할 때 모든 재렌더링에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

오늘 Vue를 학습하는 과정에서 흥미로운 현상을 발견했습니다.

특정 컴포넌트 아래의 특정 데이터가 클릭 이벤트를 통해 동적으로 수정되면 뷰의 해당 데이터가 동기적으로 수정됩니다. 네, 말도 안되는 소리 아닌가요? Vue의 주요 기능은 데이터의 양방향 바인딩입니다. . 흥미로운 점은 제가 이 컴포넌트 아래에 작성한 Math.random()을 사용하여 다른 데이터 값에 해당하는 값과 뷰도 변경되었다는 것입니다.

초보인 저에게는 좀 이상해서 수정하겠습니다. 2개로 바뀌었나요? ? ? ? 예를 들어 데이터가 양방향으로 동기화될 때 어떤 일이 발생할 수 있는지 잠시 생각해 보겠습니다. 하나의 노드가 변경되면 해당 노드가 다시 로드된다는 것이 사실입니까? ? ?

이 이유는 Vue 데이터의 양방향 바인딩 원리와 관련이 있을 것이라고 생각하여 검색해 보니 DocumentFragment라는 것이 있었습니다. 예전에 본 것 같은데 결제를 하지 않았습니다. 그것에 많은 관심을 기울이십시오. 용도:

DocumentFragment(문서 조각)는 여러 하위 노드를 포함할 수 있으며 DOM에 삽입하면 해당 하위 노드만 대상 노드에 삽입됩니다. 이를 노드 세트의 컨테이너로 생각하십시오. DocumentFragment를 사용하여 노드를 처리하는 것이 DOM을 직접 조작하는 것보다 훨씬 빠르고 좋습니다.

수동 강조: Vue가 컴파일되면 마운팅 대상의 모든 하위 노드를 하이재킹합니다(실제로는 추가 메소드를 통해 DOM의 노드가 자동으로 삭제됩니다). 일부 처리 후 DocumentFragment가 전체적으로 반환되어 탑재 대상에 삽입됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JQuery는 select 구성 요소의 선택된 값 방법을 선택합니다

$set 및 vue.js_vue.js의 배열 업데이트 방법

react-router4 방법의 코드 분할(기반) 웹팩)

위 내용은 vue에서 단일 구성 요소의 데이터를 동적으로 수정할 때 모든 다시 렌더링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!