Cara menggunakan v-cloak untuk menyelesaikan masalah kilat dalam Vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna Semakin ramai pembangun mula menggunakannya untuk membangunkan antara muka hadapan dalam projek. Dalam proses menggunakan Vue, kadangkala kita akan menghadapi beberapa masalah gaya flashing. Artikel ini akan memperkenalkan cara menggunakan v-cloak dalam Vue untuk menyelesaikan masalah ini.

Apakah masalah gaya berkelip?

Apabila Vue memaparkan komponen, apabila pengikatan data Vue digunakan dalam templat, data dihuraikan terlebih dahulu, dan kemudian perbezaan yang disebabkan oleh perubahan data dikemas kini kepada DOM. Proses ini mengambil masa tertentu, terutamanya jika data adalah kompleks atau terdapat banyak nod DOM, ia akan menyebabkan perubahan gaya ringkas apabila komponen dipaparkan apabila halaman dimuatkan Situasi ini dipanggil gaya.

Dua pelaksanaan berikut diperkenalkan masing-masing:

1 Gunakan atribut paparan CSS

Dalam komponen Vue, anda boleh menetapkan atribut paparan kepada tiada melalui gaya. atribut, dan kemudian Diubah suai untuk menyekat semasa kitaran hayat dipasang(). Selepas komponen Vue dipaparkan, semua CSS dimuatkan, yang akan menyebabkan DOM komponen disembunyikan sehingga ia mula-mula dimuatkan.

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

Kaedah ini agak mudah dan sesuai untuk halaman yang ringkas. Tetapi jika halaman itu rumit atau perlu memuatkan beberapa data tak segerak, kaedah ini mungkin tidak sesuai. Kemudian, anda boleh mempertimbangkan untuk menggunakan v-cloak untuk melaksanakannya.

2. Gunakan v-cloak

v-cloak ialah salah satu arahan yang disediakan oleh Vue, yang boleh digunakan untuk menyembunyikan sintaks Misai yang tidak disusun. Elemen v-jubah dan anak-anaknya akan kekal paparan:tiada sehingga sintaks Misai dihuraikan ke dalam nilai sebenar. Setelah pengkompil Vue sedia, elemen jubah v akan dialih keluar.

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

Gunakan arahan [v-cloak] pada komponen untuk mengawal penyembunyian, tetapkan gaya melalui