Vue에서 nextTick에는 어떤 기능이 있나요? nextTick의 간단한 구현

이 기사에서는 Vue에서 nextTick의 기능이 무엇인지 설명합니다. 달성하는 방법? , 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있으므로 도움이 되기를 바랍니다.

nextTick은 Vue의 핵심 기능이며, nextTick은 Vue의 내부 구현에 자주 사용됩니다. 그러나 많은 초보자들은 nextTick의 원리나 nextTick의 기능조차 이해하지 못합니다.

그럼 먼저 nextTick이 무엇인지 살펴보겠습니다.

nextTick 함수

공식 문서 설명을 보세요:

다음 DOM 업데이트 주기가 끝난 후 지연된 콜백을 실행합니다. 업데이트된 DOM을 얻으려면 데이터를 수정한 후 즉시 이 방법을 사용하세요.

공식 예를 다시 살펴보세요.

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

2.1.0의 새로운 기능: 콜백이 제공되지 않고 Promise를 지원하는 환경에서는 Promise가 반환됩니다. Vue에는 Promise 폴리필이 제공되지 않으므로 대상 브라우저가 기본적으로 Promise(IE: 왜 나를 보고 계시나요?)를 지원하지 않는 경우 폴리필을 직접 제공해야 합니다.

보시다시피 nextTick의 주요 기능은 데이터를 변경하고 dom 업데이트 시 콜백 함수가 작동하도록 하는 것입니다. 많은 사람들이 이것을 보고 혼란스러워합니다. DOM이 업데이트된 후 왜 콜백 함수를 실행해야 합니까? 데이터를 수정한 후에는 DOM이 자동으로 업데이트되지 않습니까?

이것은 JS의 Event Loop와 관련된 것입니다. 수많은 온라인 튜토리얼이 있으므로 여기서는 자세히 다루지 않겠습니다. 이 문서를 계속 읽기 전에 이벤트 루프를 이해하는 것이 좋습니다.

실용적인 예:

페이지 표시기가 있는 테이블이 있고 페이지를 넘길 때마다 첫 번째 항목을 선택해야 합니다. 일반적인 상황에서 우리가 원하는 것은 페이지 터너를 클릭하고, 백그라운드에서 데이터를 얻고, 테이블 데이터를 업데이트하고, 테이블 API를 조작하여 첫 번째 항목을 선택하는 것입니다.

그러나 테이블 데이터가 업데이트되었지만 첫 번째 항목이 선택되지 않은 것을 확인할 수 있습니다. 첫 번째 항목을 선택하면 데이터가 업데이트되지만 DOM은 업데이트되지 않기 때문입니다. 이 시점에서 nextTick을 사용하여 DOM이 업데이트된 후 테이블의 첫 번째 항목 선택을 조작할 수 있습니다.

그렇다면 DOM이 업데이트된 후 콜백 함수를 실행하기 위해 nextTick은 정확히 무엇을 합니까?

소스 코드 분석

nextTick의 소스 코드는 src/core/util/next-tick.js에 있으며, 총 118줄로 매우 짧고 간결하며 소스를 읽는 학생들에게 매우 적합합니다. 처음으로 코드를 작성합니다.

nextTick 소스 코드는 크게 두 부분으로 나뉩니다.

1. 기능 감지

2. 기능 감지에 따라 다양한 방식으로 콜백 큐 실행

기능 감지

이 부분은 사실 매우 간단합니다. 아시다시피 Event Loop는 매크로 태스크(Macro Task)와 마이크로 태스크(Micro Task)로 나누어져 있으며, 매크로 태스크나 마이크로 태스크의 실행 여부에 관계없이 완료 후 다음 틱에 진입하고 그 사이에 UI 렌더링이 수행됩니다. 두 개의 진드기.

단, 매크로 작업은 마이크로 작업보다 시간이 더 걸리므로 브라우저에서 지원하는 경우 마이크로 작업을 먼저 사용하세요. 브라우저가 마이크로태스크를 지원하지 않는 경우 매크로태스크를 사용하세요. 그러나 다양한 매크로태스크의 효율성도 다르므로 브라우저의 지원에 따라 다른 매크로태스크를 사용해야 합니다.

nextTick은 능력 테스트와 관련하여 이 아이디어를 따릅니다.

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果浏览器不支持Promise，使用宏任务来执行nextTick回调函数队列
// 能力检测，测试浏览器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，宏任务（ macro task）使用setImmediate
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 同上
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  // 都不支持的情况下，使用setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

우선 브라우저가 setImmediate를 지원하는지 확인하세요. 지원하지 않는다면 MessageChannel을 사용하세요. 지원하지 않는다면 효율성은 가장 낮지만 호환성은 가장 좋은 setTimeout만 사용하시면 됩니다.

그런 다음 브라우저가 Promise를 지원하는지 확인하세요. 그렇다면 Promise를 사용하여 콜백 함수 대기열을 실행하세요. 결국 마이크로태스크는 매크로태스크보다 빠릅니다. 지원되지 않는 경우 매크로 작업만 사용하여 콜백 함수 대기열을 실행할 수 있습니다.

콜백 함수 대기열 실행

콜백 함수 대기열을 실행하는 코드는 시작과 끝에 있습니다

// 回调函数队列
const callbacks = []
// 异步锁
let pending = false

// 执行回调函数
function flushCallbacks () {
  // 重置异步锁
  pending = false
  // 防止出现nextTick中包含nextTick时出现问题，在执行回调函数队列前，提前复制备份，清空回调函数队列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 执行回调函数队列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

...

// 我们调用的nextTick函数
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 将回调函数推入回调队列
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, &#39;nextTick&#39;)
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果异步锁未锁上，锁上异步锁，调用异步函数，准备等同步函数执行完后，就开始执行回调函数队列
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  // 2.1.0新增，如果没有提供回调，并且支持Promise，返回一个Promise
  if (!cb && typeof Promise !== &#39;undefined&#39;) {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

전체 프로세스는 콜백 함수를 수신하고 콜백 함수를 콜백 함수 대기열에 푸시하는 것입니다.

동시에 첫 번째 콜백 함수를 수신하면 기능 감지에서 해당 비동기 메서드를 실행합니다(콜백 함수 대기열은 비동기 메서드에서 호출됩니다).

첫 번째 콜백 함수가 수신될 때만 비동기 메서드가 실행되도록 하려면 어떻게 해야 합니까?

nextTick 소스 코드는 비동기 잠금 개념을 사용합니다. 즉, 첫 번째 콜백 함수를 수신하면 잠금이 먼저 닫히고 비동기 메서드가 실행됩니다. 이때 브라우저는 비동기 코드를 실행하기 전에 동기 코드가 실행되기를 기다리고 있습니다.

비유: 한 무리의 승객이 버스에 탑승하는 것과 같습니다. 첫 번째 승객이 버스에 탑승하면 버스가 출발하기 시작하고 모든 승객이 버스에 탑승하면 공식적으로 출발할 수 있습니다. 운전을 시작하세요.

물론, flashCallbacks 함수를 실행할 때 이해하기 어려운 점이 있습니다. 즉, 콜백 함수 대기열을 왜 백업해야 합니까? 콜백 함수 큐도 실행되나요?

다음과 같은 상황이 발생하기 때문입니다. nextTick이 nextTick을 적용합니다. flashCallbacks가 특별한 처리를 하지 않고 루프에서 콜백 함수를 직접 실행하는 경우 nextTick의 콜백 함수가 콜백 큐에 들어갑니다. 이는 다음 버스의 승객이 이전 버스에 탑승하는 것과 동일합니다.

간단한 nextTick 구현

그럼 간단한 nextTick을 구현해 보겠습니다.

let callbacks = []
let pending = false

function nextTick (cb) {
    callbacks.push(cb)

    if (!pending) {
        pending = true
        setTimeout(flushCallback, 0)
    }
}

function flushCallback () {
    pending = false
    let copies = callbacks.slice()
    callbacks.length = 0
    copies.forEach(copy => {
        copy()
    })
}

nextTick의 단순 버전에서는 콜백 함수가 nextTick을 통해 수신되고 콜백 함수가 setTimeout을 통해 비동기적으로 실행되는 것을 볼 수 있습니다. 이렇게 하면 다음 틱에서 콜백 함수가 실행될 수 있습니다. 즉, UI가 다시 렌더링된 후에 콜백 함수가 실행됩니다.

위 내용은 Vue에서 nextTick에는 어떤 기능이 있나요? nextTick의 간단한 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!