Penjelasan terperinci tentang fungsi nextTick dalam Vue3: operasi pemprosesan selepas kemas kini DOM

Dengan perkembangan pesat teknologi bahagian hadapan, rangka kerja bahagian hadapan moden muncul satu demi satu, dan Vue.js ialah salah satu yang terbaik. Vue.js ialah rangka kerja JavaScript progresif yang mudah dipelajari, cekap dan fleksibel, menjadikannya ideal untuk membina antara muka web interaktif. Vue.js 3 ialah versi terbaru Vue.js Ia meningkatkan lagi keunggulan Vue.js melalui satu siri peningkatan prestasi berterusan, pembinaan semula seni bina dan pengalaman pembangunan yang lebih baik. Antaranya, fungsi nextTick ialah ciri dalam Vue.js 3 yang patut diterokai lebih lanjut.

Artikel ini akan memperkenalkan anda kepada fungsi nextTick dalam Vue.js 3 secara terperinci, termasuk penggunaan asas, prinsip pelaksanaan dan senario aplikasinya.

1. Penggunaan asas fungsi nextTick

Fungsi nextTick dalam Vue.js ialah kaedah tak segerak yang digunakan untuk melaksanakan beberapa operasi tertentu selepas DOM dikemas kini. Ia dilaksanakan secara mikro-tugas, iaitu, dalam gelung peristiwa yang sama, semua tugas penyegerakan dilaksanakan serta-merta selepas selesai. Ini akan memastikan bahawa panggilan balik yang dipanggil oleh nextTick dilaksanakan selepas kemas kini DOM sebenar, yang sangat penting jika kami beroperasi selepas kemas kini DOM.

Dalam Vue.js 3, fungsi berikut boleh dicapai dengan menggunakan fungsi nextTick:

1. Memanipulasi DOM serta-merta selepas data diubah suai

Oleh kerana Vue.js menggunakan strategi kemas kini tak segerak, jadi selepas data diubah suai, DOM tidak akan dikemas kini dengan serta-merta, tetapi akan menunggu kemas kini seterusnya Vue.js untuk dipaparkan semula. Jika kita perlu mengendalikan DOM sejurus selepas data diubah suai, kita boleh menggunakan fungsi nextTick.

Sebagai contoh, kami menggunakan arahan v-if dalam templat untuk mencapai kesan menunjukkan/menyembunyikan kandungan. Apabila kita perlu menukar gaya DOM mengikut perubahan data, kita boleh melakukannya melalui fungsi nextTick.

<template> 
  <div>
    <button @click="toggleContent">切换内容显示</button>
    <div v-if="showContent" ref="content">这是要显示的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent
      this.$nextTick(() => {
        // 在DOM更新后，修改样式
        this.$refs.content.style.color = 'red'
      })
    }
  }
}
</script>

2. Dapatkan maklumat DOM yang dikemas kini

Apabila data dikemas kini dan kami perlu mendapatkan maklumat DOM yang dikemas kini, kami boleh menggunakan fungsi nextTick. Oleh kerana fungsi nextTick akan dilaksanakan selepas DOM sebenar dikemas kini, kami boleh mendapatkan maklumat DOM yang dikemas kini.

Sebagai contoh, kami menggunakan arahan v-for dalam templat untuk melintasi tatasusunan, dan kemudian mendapatkan maklumat gaya elemen li selepas DOM dikemas kini.

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="getListStyle">获取列表样式</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    getListStyle() {
      this.list.push('item4')
      this.$nextTick(() => {
        // 获取更新后的li元素样式信息
        const liList = document.querySelectorAll('li')
        liList.forEach((li) => {
          console.log(li.style)
        })
      })
    }
  }
}
</script>

2. Prinsip pelaksanaan fungsi nextTick

Dalam Vue.js 3, terdapat dua cara utama untuk melaksanakan fungsi nextTick: menggunakan Promise dan menggunakan MutationObserver.

1. Gunakan Promise

Dalam Vue.js 3, gunakan Promise untuk merangkum fungsi nextTick. Proses khusus adalah seperti berikut:

// 初始化Promise
const promise = Promise.resolve()

export function nextTick(callback?: Function) {
  // 将回调包装成一个微任务函数
  return promise.then(callback)
}

Dalam kod di atas, Promise.resolve() digunakan untuk memulakan objek Promise, kemudian mengembalikan objek Promise baharu dan mendaftarkan panggilan balik fungsi panggil balik dalam then() kaedah. Oleh kerana Promise ialah microtask, fungsi panggil balik dalam fungsi nextTick juga merupakan microtask, yang lebih cekap daripada setTimeout atau setImmediate.

2. Gunakan MutationObserver

MutationObserver ialah API tak segerak yang disertakan dengan penyemak imbas, yang boleh digunakan untuk memantau perubahan dalam pepohon DOM untuk mencapai operasi tak segerak.

Dalam Vue.js 3, fungsi nextTick boleh dirangkumkan melalui MutationObserver. Proses khusus adalah seperti berikut:

const callbacks = []
let pending = false

// 回调函数
function flushCallbacks() {
  // 标记异步任务已经在执行
  pending = false
  // 执行回调函数
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// 创建Observer实例
const observer = new MutationObserver(flushCallbacks)

// 注册用户行为
const textNode = document.createTextNode(String(0))
observer.observe(textNode, {
  characterData: true
})

export function nextTick(callback?: Function) {
  callbacks.push(() => {
    if (callback) {
      try {
        callback()
      } catch (e) {
        console.error(e)
      }
    }
  })

  if (!pending) {
    // 标记异步任务未执行
    pending = true
    // 改变textNode的值
    textNode.data = String(Date.now())
  }
}

Dalam kod di atas, tika Observer dibuat menggunakan MutationObserver, dan kemudian nod textNode didaftarkan untuk mendengar perubahan dalam characterData Apabila atribut data textNode berubah, kaedah flushCallbacks() akan dilaksanakan. Dalam nextTick, kami meletakkan panggilan balik fungsi panggil balik ke dalam tatasusunan panggilan balik, kemudian menukar atribut data textNode, mencetuskan peristiwa perubahan characterData MutationObserver, dengan itu melaksanakan kaedah flushCallbacks() dan melaksanakan semua fungsi panggil balik.

3. Senario aplikasi fungsi nextTick

Fungsi nextTick dalam Vue.js mempunyai banyak senario aplikasi, dan hanya beberapa daripadanya diperkenalkan di sini.

1. Operasi DOM dalam arahan v-for

Apabila menggunakan arahan v-for untuk melintasi tatasusunan, jika anda perlu mengendalikan semua elemen DOM, anda boleh gunakan nextTick.

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    operateDOM() {
      this.$nextTick(() => {
        // 操作所有的li元素
        const liList = document.querySelectorAll('li')
        liList.forEach((li, index) => {
          li.style.color = `hsl(${index * 50}, 70%, 50%)`
        })
      })
    }
  }
}
</script>

Dalam kod, selepas arahan v-for mengemas kini DOM, gunakan fungsi nextTick untuk mengendalikan semua elemen li dan menetapkan nilai warnanya.

2. Operasi DOM selepas kemas kini data tak segerak

Selepas mengemas kini data secara tidak segerak, jika anda perlu mengendalikan DOM yang dikemas kini, anda juga boleh menggunakan nextTick.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">异步更改message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js'
    }
  },
  methods: {
    changeMessage() {
      setTimeout(() => {
        this.message = 'Hello World'
        this.$nextTick(() => {
          // 操作更新后的DOM
          document.querySelector('p').style.color = 'red'
        })
      }, 1000)
    }
  }
}
</script>

Dalam kod, selepas mengemas kini data secara tidak segerak, gunakan setTimeout untuk melengahkan selama 1 saat, dan kemudian kemas kini nilai mesej. Selepas nilai mesej dikemas kini, gunakan fungsi nextTick untuk mengendalikan DOM yang dikemas kini dan tetapkan warna elemen p kepada merah.

3. Tambah nod DOM secara dinamik

Apabila menambah nod DOM secara dinamik, jika anda perlu mengendalikan nod DOM yang baru ditambah, anda juga boleh menggunakan nextTick.

<template>
  <div>
    <ul ref="list">
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">动态添加一项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    addItem() {
      this.list.push('item4')
      this.$nextTick(() => {
        // 操作新加入的li元素
        const liList = this.$refs.list.querySelectorAll('li')
        liList[liList.length - 1].style.color = 'red'
      })
    }
  }
}
</script>

Dalam kod, arahan v-for digunakan untuk melintasi tatasusunan, dan kemudian item ditambah secara dinamik apabila butang diklik. Selepas penambahan selesai, gunakan fungsi nextTick untuk mengendalikan elemen li yang baru ditambah dan menetapkan warnanya kepada merah.

4. Ringkasan

Dalam Vue.js 3, fungsi nextTick ialah ciri yang sangat praktikal Ia boleh melakukan beberapa operasi khusus selepas DOM dikemas kini, seperti mengubah suai gaya DOM dan mendapatkan kemas kini. Maklumat DOM akhir, dsb. Terdapat dua cara utama untuk melaksanakan fungsi nextTick: menggunakan Promise dan menggunakan MutationObserver. Dalam pembangunan sebenar, mengikut senario aplikasi yang berbeza, kami boleh menggunakan fungsi nextTick secara fleksibel untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi nextTick dalam Vue3: operasi pemprosesan selepas kemas kini DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!