Vue 비동기 렌더링이 왜 필요한가요?

이유: 성능을 향상시킬 수 있습니다. 비동기 업데이트를 사용하지 않으면 데이터가 업데이트될 때마다 현재 구성 요소가 다시 렌더링됩니다. 따라서 성능상의 이유로 Vue는 데이터가 있을 때마다 즉시 업데이트하는 대신 이 데이터 업데이트 후에 뷰를 비동기적으로 업데이트합니다. 업데이트.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

1. nextTick()

nextTick의 원리와 기능은 우리가 운영하는 DOM이 업데이트되도록 보장합니다.

(1) 적용 시나리오 : 뷰가 업데이트된 후 새로운 뷰를 기반으로 동작합니다.

• 데이터가 변경된 후에 수행되는 작업이며, 이 작업은 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하며 , 이 작업은 nextTick()에 배치되어야 합니다. 콜백 함수.
nextTick()的回调函数中。
• 如果在created()钩子进行DOM操作，created()中dom还没有渲染，一定要放在nextTick()的回调函数中。
• Vue采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就需要用到了nextTick了。

（2）原理：

• nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JS 方法来模拟对应的微/宏任务的实现；
• 本质是为了利用 JS的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列；
• 本质是对JS执行原理事件循环的一种应用

nextTick 是典型的将底层JS执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶

如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，Vue 会在本轮数据更新后，再去异步更新视图。而不是每当有数据更新，就立即更新视图。

• 为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用nextTick(callback)；
• nextTick()将回调延迟到下一个事件循环开始时执行, 这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。 

当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新才会进行必要的DOM更新。

(3) vue的降级策略

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替，进行降级处理。降级处理的目的都是将flushCallbackscreated() 후크에서 DOM 작업을 수행하는 경우

dom이 Created()에서 렌더링되지 않았으므로

nextTick()의 콜백 함수에 배치해야 합니다. . Vue는 ​​데이터 기반 뷰라는 아이디어를 채택하지만 어떤 경우에는 여전히 DOM을 조작해야 합니다. 때로는 DOM1의 데이터가 변경되고 DOM2가 DOM1에서 데이터를 가져와야 하는 경우 DOM2의 보기가 업데이트되지 않은 것을 발견하고 nextTick을 사용해야 합니다. (2) 원리:

nextTick 핵심 은 Promise, MutationObserver, setImmediate 및 setTimeout과 같은 기본 JS 메서드를 사용하여 해당 micro/ 매크로 작업 구현;
핵심은

JS의 비동기 콜백 작업 대기열을 사용하여

Vue 프레임워크에서 자체 비동기 콜백 대기열을 구현하는 것입니다.

본질은 다음과 같습니다. JS를 실행하는 것 이벤트 루프 원리 적용 nextTick은 기본 JS 실행 원리를 특정 사례에 적용하는 일반적인 예입니다. 비동기 업데이트 대기열 메커니즘을 도입한 이유 ∶

🎜🎜만약 🎜비동기 업데이트가 사용되지 않는 경우🎜, 🎜데이터가 업데이트될 때마다 현재 구성 요소가 다시 렌더링됩니다. 🎜그래서🎜성능상의 이유로 Vue는 이번 데이터 업데이트 후에 뷰를 비동기적으로 업데이트합니다. 🎜데이터가 업데이트될 때마다 뷰를 즉시 업데이트하는 대신. 🎜🎜🎜🎜🎜🎜데이터 업데이트 작업 후 DOM을 작동하려면 데이터 변경 직후 nextTick(callback)을 사용할 수 있습니다. 🎜🎜🎜🎜🎜nextTick() 콜백을 지연하려면 🎜가 다음 이벤트 루프를 시작할 때 실행됩니다. 이런 방식으로 DOM 업데이트가 완료된 후 콜백 함수가 호출되며 최신 DOM 요소가 표시됩니다. 얻을 수 있습니다. 🎜🎜🎜🎜vm.someData = 'new value'로 설정하면 DOM은 즉시 업데이트되지 않지만 비동기 큐가 지워지면 업데이트됩니다. 즉, 다음 이벤트 루프가 실행될 때입니다. 🎜필요한 DOM 업데이트가 수행됩니다. 🎜🎜🎜🎜🎜(3) Vue의 다운그레이드 전략 🎜🎜🎜🎜🎜Vue는 내부적으로 🎜비동기 큐🎜에 대해 기본 🎜Promise.then, MutationObserver 🎜 및 🎜setImmediate🎜를 사용하려고 합니다. 🎜setTimeout(fn, 0) 🎜다운그레이드 처리를 위해 대체됩니다. 다운그레이드 처리의 목적은 flushCallbacks 함수를 마이크로태스크 또는 매크로태스크 대기열에 넣고 다음 이벤트 루프에서 실행을 기다리는 것입니다.🎜🎜🎜🎜실제 대기열 플러시가 다음에서 발생할 수도 있습니다. 이 이벤트 루프🎜 마이크로 태스크에서 새로 고쳐진 내용🎜은 다음 이벤트 루프🎜에서도 새로 고쳐질 수 있습니다🎜. 이는 🎜 코드의 현재 실행 환경 🎜에 따라 다릅니다. 현재 실행 환경이 Promise를 지원하는 경우 nextTick은 실제로 Promise를 사용하여 내부적으로 실행되고 큐 새로 고침은 이 이벤트 루프의 마이크로태스크에서 실행됩니다. 🎜🎜🎜🎜🎜마이크로 작업에 우선순위를 부여하는 이유: 🎜마이크로 작업에서 🎜대기열 업데이트🎜는 매크로 작업에서 🎜업데이트하는 것보다 UI 렌더링🎜이 덜 필요합니다. 🎜🎜🎜🎜🎜2. Vue는 왜 비동기 렌더링을 사용하나요? 🎜🎜🎜🎜🎜vue는 구성 요소 수준 업데이트🎜입니다. 예: this.a = 1, this.b=2 (동일한 관찰자)🎜🎜

(1) 이유: 비동기 업데이트를 사용하지 않는 경우 데이터가 업데이트될 때마다 현재 구성 요소가 다시 렌더링됩니다. 그래서성능상의 이유로 Vue는 이번 데이터 업데이트 후에 뷰를 비동기적으로 업데이트합니다. 데이터가 업데이트될 때마다 뷰를 즉시 업데이트하는 대신.

(2) 프로세스:

• Vue는 DOM 업데이트를 비동기식으로 수행합니다. Vue는 큐를 열고 데이터 변경을 관찰하는 감시자에 넣습니다. 이 대기열에 푸시되었습니다.

• 이 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 이러한 버퍼링 동작은 중복 데이터를 효과적으로 제거하고 불필요한 계산 및 DOM 작업을 방지할 수 있습니다.

• 그리고 다음 이벤트 루프에서 Vue는 대기열을 지우고 필요한 DOM 업데이트를 수행합니다.

3) 소스 코드 분석:

• 데이터가 변경되면 알림을 통해 감시자에게 업데이트 작업을 수행하도록 알립니다.

• 감시자의 update()를 차례로 호출합니다. [i].update 뷰가 업데이트되지 않습니다.

• 감시자를 대기열에 넣습니다. queueWatcher는 감시자의 ID를 기반으로 중복 제거를 수행합니다(감시자가 하나의 감시자에 따라 다름). 대기열에 감시자가 추가됩니다(뷰는 업데이트되지 않음).

• nextTick을 통해 플러시SchedulerQueue 메서드를 비동기적으로 실행하여 감시자 대기열을 새로 고칩니다(뷰 업데이트).

위 내용은 Vue 비동기 렌더링이 왜 필요한가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!