Apakah kegunaan nexttick dalam vue

Dalam vue, nexttick() digunakan untuk melengahkan fungsi panggil balik yang dipanggil selepas data kemas kini DOM seterusnya anda boleh melaksanakan panggilan balik tertunda selepas kitaran kemas kini DOM seterusnya tamat dan menggunakannya untuk mendapatkan DOM yang dikemas kini; selepas mengubah suai data. Sintaks ialah "Vue.nextTick([panggilan balik,konteks])".

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah penggunaan nexttick dalam vue

Definisi: Laksanakan panggilan balik tertunda selepas kitaran kemas kini DOM seterusnya tamat. Gunakan kaedah ini serta-merta selepas mengubah suai data untuk mendapatkan DOM yang dikemas kini.

Jadi kaedah Vue ini untuk mendapatkan DOM yang dikemas kini telah diperolehi. Oleh itu, pelaksanaan yang diletakkan dalam fungsi panggil balik Vue.nextTick() hendaklah kod js yang mengendalikan DOM

Pemahaman: nextTick() menangguhkan fungsi panggil balik sehingga kali seterusnya DOM mengemas kini data pemahaman mudah ialah: apabila data dikemas kini dan dipaparkan dalam dom, fungsi itu dilaksanakan secara automatik

<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>

Gunakan ini.$nextTick()

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

Nota: Pelaksanaan Vue. Responsif tidak bermakna DOM berubah serta-merta selepas data berubah, tetapi mengemas kini DOM mengikut strategi tertentu. $nextTick adalah untuk melaksanakan panggilan balik tertunda selepas kitaran kemas kini DOM seterusnya tamat Jika anda menggunakan $nextTick selepas mengubah suai data, anda boleh mendapatkan DOM yang dikemas kini dalam panggilan balik

Bilakah anda perlu menggunakan Vue. seterusnyaTick()? ?

1. Operasi DOM yang dilakukan oleh fungsi cangkuk yang dicipta() bagi kitaran hayat Vue mesti diletakkan dalam fungsi panggil balik Vue.nextTick() Sebabnya ialah apabila fungsi cangkuk yang dicipta adalah dilaksanakan, DOM sebenarnya tidak Melakukan apa-apa pemaparan, dan melaksanakan operasi DOM pada masa ini adalah sama dengan sia-sia, jadi kod js untuk operasi DOM mesti dimasukkan ke dalam fungsi panggil balik Vue.nextTick(). Sepadan dengan ini ialah fungsi cangkuk yang dipasang, kerana semua pemasangan DOM telah selesai apabila fungsi cangkuk ini dilaksanakan.

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

2 Apabila anda ingin melakukan sesuatu berdasarkan DOM baharu selepas menukar data elemen DOM dalam projek, satu siri operasi js pada DOM baharu perlu dimasukkan ke dalam panggilan balik fungsi Vue.nextTick(); pemahaman yang popular ialah: selepas menukar data, anda perlu menggunakannya apabila anda ingin menggunakan js untuk mengendalikan paparan baharu dengan segera

<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>

Penggunaan yang betul ialah: vue menukar struktur elemen dom dan kemudian menggunakan vue.$ Kaedah nextTick() digunakan untuk menangguhkan pelaksanaan kod berikutnya selepas data dom dikemas kini

    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. Apabila menggunakan palam pihak ketiga- dalam, anda berharap untuk menggunakan semula pemalam apabila beberapa dinamik dom yang dihasilkan oleh perubahan vue , kaedah ini juga akan digunakan pada masa ini, anda perlu melaksanakan kaedah menggunakan semula pemalam dalam panggilan balik fungsi $nextTick.

Prinsip penggunaan Vue.nextTick(panggilan balik):

Sebabnya ialah Vue melakukan kemas kini dom secara tidak segerak Setelah perubahan data diperhatikan, Vue akan membuka baris gilir dan kemudian memasukkannya ke dalam Pemerhati yang sama yang memerhati perubahan data dalam gelung acara ditolak ke dalam baris gilir ini. Jika pemerhati ini dicetuskan beberapa kali, ia hanya akan ditolak ke baris gilir sekali. Tingkah laku penimbalan ini boleh menghapuskan pengiraan yang tidak perlu dan operasi DOm dengan berkesan yang disebabkan oleh data pendua. Dalam gelung acara seterusnya, Vue akan mengosongkan baris gilir dan melaksanakan kemas kini DOM yang diperlukan.

Apabila anda menetapkan vm.someData = 'nilai baharu', DOM tidak akan dikemas kini serta-merta, tetapi DOM yang diperlukan akan dikemas kini apabila baris gilir tak segerak dikosongkan, iaitu apabila gelung acara seterusnya bermula. memperbaharui. Jika anda ingin melakukan sesuatu berdasarkan keadaan DOM yang dikemas kini pada masa ini, masalah akan timbul. . Untuk menunggu Vue selesai mengemas kini DOM selepas data berubah, anda boleh menggunakan Vue.nextTick(panggilan balik) serta-merta selepas data berubah. Fungsi panggil balik ini akan dipanggil selepas kemas kini DOM selesai.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah kegunaan nexttick dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!