vue의 nextTick 종합 분석

다음 Vue.js 튜토리얼 칼럼에서는 vue의 nextTick을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue는 각도와 반응의 장점을 결합하여 양방향 데이터 바인딩 기능을 갖춘 가볍고 사용하기 쉬운 mvvm 프레임워크를 형성하는 매우 인기 있는 프레임워크입니다. 나는 그것을 사용하는 것을 선호합니다. vue를 사용할 때 자주 사용하는 방법은 this.$nextTick입니다. 제가 사용하는 일반적인 시나리오는 데이터를 얻은 후 새 보기에서 다음 단계나 다른 작업을 수행해야 할 때 DOM을 얻을 수 없다는 것입니다. 할당 작업은 데이터 모델 변경만 완료하고 뷰 업데이트는 완료하지 않기 때문입니다. 이때 우리는 이 장에서 소개된 기능을 사용해야 합니다.

nextTick을 사용하는 이유

다음 코드를 참조하세요

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一个li颜色变为红色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

데이터를 가져온 후 데이터 모델의 목록 속성에 할당한 다음 ul 요소를 참조하여 첫 번째 li를 찾으려고 합니다. 색상을 red 로 변경하지만 실제로는 오류가 보고됩니다. 이 문장을 실행할 때 ul 아래에 li가 없습니다. 이는 방금 수행한 할당 작업으로 인해 현재 뷰 레이어가 업데이트되지 않음을 의미합니다.

따라서 이 경우 vue는 $nextTick 메소드를 제공합니다. 나중에 업데이트된 뷰에서 작업하려면 실행할 함수를 this.$nextTick 메소드에 전달하면 됩니다. 우리를 위해 일을 해주세요.

소스 코드 해석

이 함수는 vue2.2.6 버전의 450번째 줄부터 시작하여 매우 간단합니다.

우선 이 함수는 단순 관심 모드를 사용하는 건가요, 아니면 생성된 클로저 함수인가요?

var callbacks = [];   // 缓存函数的数组
var pending = false;  // 是否正在执行
var timerFunc;  // 保存着要执行的函数

먼저 나중에 사용할 수 있도록 몇 가지 변수를 정의합니다. 다음은 함수입니다.

function nextTickHandler () {
  pending = false;
  //  拷贝出函数数组副本
  var copies = callbacks.slice(0);
  //  把函数数组清空
  callbacks.length = 0;
  // 依次执行函数
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

이 함수는 $에서 실제로 호출되는 함수입니다. 다음틱 .

다음으로 Vue는 위 함수 호출을 지연하기 위해 세 가지 상황을 나눕니다. $nextTick의 목적은 DOM이 사용되기 전에 업데이트될 때까지 수신 함수를 지연하는 것이므로 여기서는 우아한 내림차순으로 js 메서드를 사용합니다. 가리키다.

1. promise.then 호출 지연

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  var logError = function (err) { console.error(err); };
  timerFunc = function () {
    p.then(nextTickHandler).catch(logError);
    if (isIOS) { setTimeout(noop); }
  };
}

브라우저가 Promise를 지원하는 경우 Promise.then을 사용하여 함수 호출을 지연할 수 있습니다. Promise.then 메서드는 함수를 현재 함수 호출 스택의 끝까지 지연시킬 수 있습니다. , 또한 즉, 함수는 함수 호출 스택에서 마지막으로 호출됩니다. 이로써 지연을 달성합니다.

2. MutationObserver는 변경 사항을 모니터링합니다

else if (typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

  var counter = 1;
  var observer = new MutationObserver(nextTickHandler);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
}

MutationObserver는 h5에 추가된 새로운 기능입니다. 해당 기능은 dom 노드의 변경 사항을 모니터링하고 모든 dom 변경이 완료된 후 콜백 기능을 실행하는 것입니다.

특별히 모니터링해야 할 몇 가지 변경 사항이 있습니다

• childList: 하위 요소의 변경 사항

• attributes: 속성의 변경 사항

• characterData: 노드 콘텐츠 또는 노드 텍스트의 변경 사항

• subtree: 모든 하위 항목 변경 사항 노드에서(하위 노드 및 하위 노드의 하위 노드 포함)

위의 코드는 텍스트 노드의 내용을 변경하여 변경 사항을 트리거하는 텍스트 노드를 생성하는 것을 볼 수 있습니다. 왜냐하면 데이터 모델이 업데이트된 후 dom 노드가 다시 렌더링되게 됩니다.

그래서 우리는 이러한 변경 리스너를 추가하여 텍스트 노드의 변경으로 리스너를 트리거하고 모든 DOM이 렌더링된 후 함수를 실행하여 지연 효과를 얻습니다.

3. setTimeout 지연기

else {
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

setTimeout의 지연 원리를 사용하면 setTimeout(func, 0)은 func 함수를 다음 함수 호출 스택의 시작 부분으로 지연시킵니다. 즉, 함수는 현재 호출 이후에 실행됩니다. 기능이 실행되면 지연 기능이 완료됩니다.

클로저 함수

return function queueNextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) { cb.call(ctx); }
      if (_resolve) { _resolve(ctx); }
    });
    // 如果没有函数队列在执行才执行
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // promise化
    if (!cb && typeof Promise !== 'undefined') {
      console.log('进来了')
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }

이 반환 함수는 우리가 함수를 추가할 때마다 콜백 함수 배열을 스택에 푸시합니다. 그런 다음 현재 실행 중인지 모니터링하고, 그렇지 않은 경우 해당 기능을 실행합니다. 이것은 이해하기 쉽습니다. 다음 if는 약속입니다.

this.$nextTick(function () {

})
// promise化
this.$nextTick().then(function () {

}.bind(this))

위 코드를 작성하는 두 번째 방법은 우리에게 일반적이지 않습니다. $nextTick 함수를 직접 호출한 다음 Promise 형식으로 코드를 작성합니다. 그러나 이는 then에서 수동으로 바인딩해야 하며 Vue는 처리하지 않습니다. 내부적으로요.

관련 권장 사항:

2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !

위 내용은 vue의 nextTick 종합 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!