$forceUpdate dalam Vue memaksa kemas kini

Vue ialah rangka kerja JavaScript yang popular untuk membina halaman web interaktif. Mekanisme DOM maya yang diperkenalkannya menjadikan paparan kemas kini lebih cekap dan lebih pantas.

Walau bagaimanapun, kadangkala kita mungkin perlu memaksa paparan komponen untuk dikemas kini walaupun data tidak berubah. Pada masa ini, anda perlu menggunakan kaedah $forceUpdate yang disediakan oleh Vue.

$forceUpdate ialah kaedah dalam contoh Vue, yang akan memaksa paparan komponen semasa dikemas kini, walaupun data tidak berubah. Tetapi sedar bahawa berbuat demikian boleh menyebabkan masalah prestasi kerana Vue akan mengira semula pepohon paparan dan memaparkan semula komponen.

Menggunakan kaedah $forceUpdate adalah sangat mudah. Kami hanya perlu memanggilnya dalam contoh Vue, sebagai contoh:

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
      this.$forceUpdate();
    }
  }
}

Dalam contoh ini, kami mentakrifkan kiraan pembolehubah data dan kenaikan kaedah. Apabila kaedah kenaikan dipanggil, kami menambah pembolehubah kiraan dan kemudian memanggil kaedah $forceUpdate untuk memaksa paparan komponen dikemas kini.

Perlu diambil perhatian bahawa kaedah $forceUpdate hanya akan bertindak pada komponen semasa dan subkomponennya. Jika kita ingin mengemas kini paparan komponen induk, kita boleh menggunakan kaedah $emit untuk mencetuskan acara tersuai.

// 子组件
<template>
  <button @click="increment">{{ count }}</button>
</template>

export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('force-update');
    }
  }
}

// 父组件
<template>
  <div>
    <child-component :count="count" @force-update="forceUpdate"></child-component>
  </div>
</template>

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate();
    }
  }
}

Dalam contoh ini, komponen anak mencetuskan peristiwa tersuai yang dipanggil force-update melalui kaedah $emit. Dalam komponen induk, kami menggunakan @force-update untuk mendengar acara ini pada komponen anak dan memanggil kaedah $forceUpdate dalam fungsi panggil balik untuk mengemas kini paparan komponen induk.

Perlu diambil perhatian bahawa menggunakan kaedah $forceUpdate mungkin membawa masalah prestasi dan komplikasi. Oleh itu, kita harus cuba mengelak daripada menggunakannya, tetapi mencetuskan kemas kini secara automatik dengan mengubah suai data, atau menggunakan data elastik untuk mencapai prestasi dan kebolehselenggaraan yang lebih baik.

Atas ialah kandungan terperinci $forceUpdate dalam Vue memaksa kemas kini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!