vue에서 nexttick의 사용법은 무엇입니까

vue에서 nexttick()은 다음 DOM 업데이트 데이터 이후 콜백 함수 호출을 지연하는 데 사용됩니다. 다음 DOM 업데이트 주기가 끝난 후 지연된 콜백을 실행할 수 있으며, 이를 사용하여 데이터 수정 후 업데이트된 DOM을 얻을 수 있습니다. 구문은 "Vue .nextTick([콜백,컨텍스트])"입니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

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()의 콜백 함수에 배치되어야 합니다. 그 이유는 생성된() 때 DOM이 실제로 전혀 렌더링되지 않기 때문입니다. ) 후크 함수가 실행됩니다. 이때 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="testMsg">{{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内容被马上更新了");
        }
      });
    },

3. 타사 플러그인을 사용할 때 Vue에서 일부 DOM 역학이 생성될 때 플러그인을 다시 적용하려는 경우 변경하면 이 메서드도 사용됩니다. 이때 $nextTick의 콜백 함수를 사용해야 합니다. 해당 메서드를 실행하여 플러그인을 다시 적용합니다.

Vue.nextTick(콜백) 사용 원리:

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

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

【관련 추천: "vue.js tutorial"】

위 내용은 vue에서 nexttick의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!