vue.nexttic이 무엇인가요?

vue.nextick은 업데이트된 DOM을 얻는 Vue 메서드입니다. nextTick 메서드는 다음 번 DOM이 데이터를 업데이트할 때까지 콜백 함수를 지연합니다. 즉, 데이터가 업데이트된 다음 DOM에서 렌더링될 때 nextTick 함수가 실행됩니다. 자동으로 실행됩니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue 버전 2.9, thinkpad t480 컴퓨터.

추천: "vue Tutorial"

Vue.nextTick()이 무엇인가요?

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

그래서 업데이트된 DOM을 가져오는 Vue 메소드가 파생되었습니다. 따라서 Vue.nextTick() 콜백 함수에 배치된 실행은 DOM을 작동하는 js 코드여야 합니다.

이해: nextTick()은 다음에 DOM이 데이터를 업데이트할 때까지 콜백 함수를 지연합니다. DOM에서 데이터가 업데이트되고 렌더링되면 이 함수가 자동으로 실행됩니다.

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

this.$nextTick()을 사용하세요

methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

참고: Vue의 응답성 구현은 데이터가 변경된 후 즉시 DOM이 변경된다는 의미는 아닙니다. DOM을 업데이트하는 특정 전략에 따라 변경됩니다. $nextTick은 다음 DOM 업데이트 주기가 끝난 후 지연된 콜백을 실행합니다. 데이터를 수정한 후 $nextTick을 사용하면 콜백에서 업데이트된 DOM을 얻을 수 있습니다.

Vue.nextTick()을 사용해야 하는 경우는 언제입니까? ?

1. Vue 라이프사이클의 Created() 후크 함수에 의해 수행되는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다. 그 이유는 Created()가 실행될 때 DOM이 실제로 렌더링되지 않기 때문입니다. Hook 함수가 실행되고 이때 DOM 작업을 수행하는 것은 소용이 없으므로 DOM 작업을 위한 js 코드를 Vue.nextTick()의 콜백 함수에 넣어야 합니다. 이에 대응하는 Mounted Hook 함수가 있는데, 이는 이 Hook 함수가 실행되면 모든 DOM 마운팅이 완료되기 때문입니다.

 created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

2. 프로젝트에서 DOM 요소의 데이터를 변경한 후 새 DOM을 기반으로 작업을 수행하려면 새 DOM에 대한 일련의 js 작업을 Vue.nextTick( ); 대중적인 이해 예: 데이터를 변경한 후 js를 사용하여 새 뷰를 즉시 작동하려는 경우 사용해야 합니다

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //vue数据改变，改变dom结构
      let domTxt=document.getElementById(&#39;h&#39;).innerText;  //后续js对dom的操作
      console.log(domTxt);  //输出可以看到vue数据修改后DOM并没有立即更新，后续的dom都不是最新的
      if(domTxt==="原始值"){
        console.log("文本data被修改后dom内容没立即更新");
      }else {
        console.log("文本data被修改后dom内容被马上更新了");
      }
    },
 
  }
}
</script>

올바른 사용법은 vue가 dom 요소 구조를 변경한 후 vue.$nextTick을 사용하는 것입니다. () DOM 데이터가 업데이트된 후 지연된 실행을 구현하는 방법 후속 코드

changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

Vue.nextTick(callback) 사용 원리:

Vue는 데이터 변경이 관찰되면 비동기적으로 dom 업데이트를 수행하기 때문입니다. Vue는 대기열을 연 다음 이를 동일한 이벤트 루프(이벤트 루프에서 데이터 변경을 관찰하는 감시자)에 넣습니다. 이 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 이러한 버퍼링 동작은 중복 데이터로 인해 발생하는 불필요한 계산 및 DOM 작업을 효과적으로 제거할 수 있습니다. 다음 이벤트 루프에서 Vue는 큐를 지우고 필요한 DOM 업데이트를 수행합니다.

vm.someData = 'new value'로 설정하면 DOM이 즉시 업데이트되지 않지만 비동기 대기열이 지워질 때, 즉 업데이트가 시작될 때 필요한 DOM 업데이트가 수행됩니다. 다음 이벤트 루프. 이 시점에서 업데이트된 DOM 상태를 기반으로 작업을 수행하려는 경우 문제가 발생합니다. . 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 직후 Vue.nextTick(콜백)을 사용할 수 있습니다. 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다.

위 내용은 vue.nexttic이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!