Vue의 nexttick 원리

vue의 nexttick 원칙 구현은 Vue를 기반으로 응답성을 구현합니다. DOM은 데이터 변경 직후에 변경되지 않지만 특정 전략에 따라 DOM이 업데이트됩니다.

1. 원리

1. 비동기 설명

Vue의 반응성 구현은 데이터가 변경된 후 DOM이 즉시 변경되는 것이 아니라 특정 전략에 따라 DOM을 업데이트한다는 의미입니다.

2. 이벤트 루프 설명

간단히 말하면 Vue가 데이터를 수정한 후에는 뷰가 즉시 업데이트되지 않습니다. 대신 동일한 이벤트 루프의 모든 데이터 변경이 완료된 후에 뷰가 균일하게 업데이트됩니다.

예:

그림:

이벤트 루프:

첫 번째 틱(이 업데이트 주기)

1 먼저 데이터를 수정합니다. 이는 동기화 작업입니다. 동일한 이벤트 루프의 모든 동기화 작업은 메인 스레드에서 실행되어 실행 스택을 형성합니다. 현재 DOM은 아직 포함되지 않습니다.

2.Vue는 비동기 큐를 열고 이 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. . 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다.

두 번째 틱('다음 업데이트 주기')

동기화 작업이 완료된 후 비동기 감시자 큐 작업이 실행되기 시작하고 DOM이 업데이트됩니다. Vue는 내부적으로 비동기 대기열에 기본 Promise.then 및 MessageChannel 메서드를 사용하려고 시도합니다. 실행 환경이 이를 지원하지 않으면 대신 setTimeout(fn, 0)이 사용됩니다.

세 번째 틱(다음 DOM 업데이트 주기가 끝난 후)

2. 응용 프로그램 시나리오 및 이유

1. Vue 라이프 사이클의 Created() 후크 함수에서 수행되는 DOM 작업은 Vue.nextTick()에 배치되어야 합니다. 콜백 함수에서.

create() Hook 함수가 실행될 때 DOM은 실제로 전혀 렌더링되지 않으며 이때의 DOM 작업은 헛된 것이므로 여기서는 Vue.nextTick()의 콜백에 DOM 작업을 위한 js 코드를 넣어야 합니다. 기능. 이에 대응하는 것이 Mounted() Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM 마운팅과 렌더링이 완료되기 때문에 이 Hook 함수에서는 DOM 작업을 수행하는 데 문제가 없습니다.

2. 데이터 변경 후 작업을 수행해야 하며, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다.

구체적인 이유는 Vue 공식 문서에 자세히 설명되어 있습니다.

Vue는 DOM 업데이트를 비동기식으로 수행합니다. 데이터 변경 사항이 관찰되자마자 Vue는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 이러한 중복 제거는 불필요한 계산 및 DOM 작업을 방지하는 데 중요합니다. 그런 다음 다음 이벤트 루프 "틱"에서 Vue는 큐를 플러시하고 실제(중복 제거된) 작업을 수행합니다. Vue는 내부적으로 비동기 대기열에 기본 Promise.then 및 MessageChannel을 사용하려고 시도합니다. 실행 환경이 이를 지원하지 않으면 대신 setTimeout(fn, 0)이 사용됩니다.

예를 들어 vm.someData = 'new value'를 설정하면 구성 요소가 즉시 다시 렌더링되지 않습니다. 대기열이 플러시되면 이벤트 루프 대기열이 지워지는 다음 "틱"에서 구성 요소가 업데이트됩니다. 대부분의 경우 이 프로세스에 대해 걱정할 필요가 없지만 DOM 상태가 업데이트된 후에 뭔가를 하려는 경우 약간 까다로울 수 있습니다. Vue.js는 일반적으로 개발자가 "데이터 기반" 방식으로 생각하고 DOM을 직접 건드리지 않도록 권장하지만 실제로 그렇게 해야 할 때가 있습니다. 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 직후 Vue.nextTick(콜백)을 사용할 수 있습니다. 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다.

위 내용은 Vue의 nexttick 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!