Perbincangan ringkas tentang cara untuk memaparkan semula komponen vue? 3 cara untuk berkongsi

Bagaimana untuk memaparkan semula dalam komponen vue? Artikel berikut akan meringkaskan dan berkongsi beberapa cara untuk memaparkan semula komponen Vue. Saya harap ia akan membantu semua orang.

Baru-baru ini saya menghadapi keperluan, iaitu untuk memaparkan semula komponen semasa. Ini mudah dilakukan, cuma maklumkan komponen induk untuk membuat semula.

Di bawah saya akan meringkaskan beberapa cara yang saya tahu tentang pemaparan semula komponen vue. [Cadangan berkaitan: "tutorial vue.js"]

Tukar kunci

Ini adalah yang paling disyorkan.

Oleh kerana Vue menggunakan algoritma Dom maya untuk menentukan perubahan elemen, teras perubahan adalah untuk menentukan sama ada nilai utama unsur lama dan baharu telah berubah. Jika kunci anda berubah, elemen akan dipaparkan semula Jika kunci tidak berubah, ia tidak akan dipaparkan semula.

Jadi, jika anda mahu komponen anda dipaparkan semula, anda menambah atribut key pada komponen dan kemudian menukar nilai kunci apabila ia perlu dipaparkan semula.

Komponen akan dipaparkan semula dan fungsi kitaran hayat yang sepadan, sifat yang dikira, jam tangan, dsb. akan dilaksanakan.

<template>
  <div class="home">
    <el-button @click="freshKey">test</el-button>
    <aComp :key="key"></aComp>
  </div>
</template>

<script>
import aComp from &#39;@/components/aComp&#39;
export default {
  components: {
    aComp
  },
  data () {
    return {
      key: 0
    }
  },
  methods: {
    freshKey () {
      this.key++
    }
  }
}
</script>

v-if

Antara arahan yang kami gunakan, v-if juga agak biasa.

Apabila anda menetapkannya kepada false, elemen yang terkandung dalam blok bersyarat semasa akan dimusnahkan Jika ia mengandungi komponen, fungsi kitaran hayat komponen yang sepadan (beforeDestroy, destroyed,. dll) akan dilaksanakan.

Apabila anda menetapkannya kepada true, elemen dalam blok bersyarat semasa akan dibina semula Jika ia mengandungi komponen, fungsi kitaran hayat komponen yang sepadan (created, mounted, dsb. .), Sifat yang dikira, jam tangan, dsb. akan dilaksanakan, yang bersamaan dengan pemaparan semula.

vm.$forceUpdate()

Kaedah ini tidak banyak digunakan, ia adalah untuk memaksa paparan dikemas kini.

Tetapi Vue terikat dua hala Apabila data berubah, paparan akan dimuat semula dalam masa nyata Dalam keadaan apakah kaedah ini akan digunakan?

Sebagai contoh, kaedah vue ini hanya memuat semula paparan untuk tatasusunan:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Jadi sebagai contoh, jika anda mempunyai Apabila nilai ditetapkan semula, vue tidak akan memuat semula paparan. Kemudian anda boleh menggunakan kaedah ini untuk menyegarkan semula pandangan secara paksa.

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

Apabila tika vue melaksanakan kaedah ini, ia hanya menyegarkan pandangan, dan fungsi kitaran hayat, sifat yang dikira, jam tangan, dsb. yang sepadan dengan tika itu tidak akan dilaksanakan semula.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara untuk memaparkan semula komponen vue? 3 cara untuk berkongsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!