Cara menggunakan arahan v-sekali dalam Vue untuk mencapai pemaparan satu kali pengikatan data

Vue ialah rangka kerja JavaScript bahagian hadapan yang popular yang menyediakan banyak arahan untuk memudahkan proses pengikatan data Salah satu arahan yang sangat berguna ialah v-sekali. Dalam artikel ini, kami akan menyelidiki penggunaan arahan v-sekali dan cara melaksanakan pemaparan satu kali terikat data dalam Vue.

Apakah arahan v-sekali?

v-sekali ialah arahan dalam Vue Fungsinya adalah untuk menyimpan hasil pemaparan elemen atau komponen supaya proses pemaparannya boleh dilangkau dalam kemas kini berikutnya. Ini boleh meningkatkan prestasi pemaparan, terutamanya apabila data tidak berubah dengan kerap.

Sintaks untuk menggunakan arahan v-sekali adalah sangat mudah Anda hanya perlu menambah arahan ini pada elemen atau komponen yang perlu dicache:

<template>
  <div v-once>
    {{ message }}
  </div>
</template>

Dalam kod di atas, kami. berikan

Penggunaan arahan v-sekali

Selain menggunakan arahan v-sekali pada satu elemen, ia juga boleh digunakan pada komponen. Menggunakan arahan v-sekali dalam komponen adalah sama seperti menggunakannya pada elemen, anda hanya perlu menambahkan arahan pada elemen akar komponen:

<template>
  <my-component v-once :data="data"></my-component>
</template>

Dalam kod di atas, kami mempunyai The v -sekali arahan digunakan pada elemen akar dan atribut yang dipanggil data diluluskan. Ini bermakna kami hanya mahu memaparkan komponen sekali sahaja dan Vue tidak akan memaparkan semula komponen jika sifat data berubah.

Perlu diambil perhatian bahawa arahan v-sekali hanya boleh digunakan untuk kandungan statik, iaitu kandungan yang tidak mengandungi ungkapan yang mengikat. Ini bermakna anda tidak boleh menggunakan sintaks interpolasi atau ungkapan mengikat lain di dalam elemen atau komponen apabila menggunakan arahan v-sekali.

Sudah tentu, terdapat kegunaan lain bagi arahan v-sekali, seperti:

• Menggunakan arahan v-sekali pada elemen dalam gelung v-untuk boleh meningkatkan senarai Prestasi pemaparan;
• Menggunakan arahan v-sekali dalam templat boleh cache hasil pemaparan keseluruhan templat untuk digunakan semula dalam pemaparan berikutnya.

Cara melaksanakan pemaparan satu kali pengikatan data dalam Vue

Sekarang kami telah memahami penggunaan arahan v-sekali, di bawah kami akan menunjukkan cara menggunakan arahan ini dalam Vue Untuk mencapai pemaparan satu kali pengikatan data.

Andaikan kita mempunyai komponen senarai pengguna yang mengandungi beberapa item senarai pengguna. Apabila kita mengklik butang pada item senarai, status item senarai akan berubah, sebagai contoh, kepada status yang dipadamkan. Pada masa ini, kami mahu item senarai hilang daripada senarai, tetapi pada masa yang sama, kami mahu statusnya kekal untuk operasi seterusnya.

Untuk mencapai fungsi ini, kami boleh menggunakan arahan v-sekali dalam komponen item senarai:

<template>
  <li v-if="!deleted" v-once>
    {{ user.name }}
    <button @click="onDelete">删除</button>
  </li>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {
      deleted: false
    };
  },
  methods: {
    onDelete() {
      this.deleted = true;
    }
  }
};
</script>

Dalam kod di atas, kami menggunakan v-sekali pada arahan elemen

, yang bermaksud bahawa Vue hanya akan mengira kandungan item senarai pada kali pertama ia dipaparkan. Apabila pengguna mengklik butang padam, kami menetapkan atribut yang dipadamkan kepada benar supaya Vue tidak akan memaparkan semula item senarai.

Pada masa ini, walaupun item senarai telah hilang daripada senarai, statusnya masih dikekalkan. Dengan cara ini, kami mencapai pemaparan satu kali pengikatan data.

Ringkasan

Dalam Vue, arahan v-sekali boleh digunakan untuk cache elemen atau komponen supaya proses pemaparannya boleh dilangkau dalam kemas kini seterusnya, sekali gus meningkatkan prestasi pemaparan. Dalam beberapa senario tertentu, anda boleh menggunakan arahan v-sekali untuk mencapai pemaparan satu kali pengikatan data untuk memenuhi beberapa keperluan khas. Perlu diingatkan bahawa arahan v-sekali hanya terpakai pada kandungan statik, iaitu kandungan yang tidak mengandungi ungkapan yang mengikat.

Atas ialah kandungan terperinci Cara menggunakan arahan v-sekali dalam Vue untuk mencapai pemaparan satu kali pengikatan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!