Vue mengubah nilai dan melarang pencetus

Dalam Vue.js, melalui pengikatan data dua hala, apabila data komponen berubah, komponen akan dipaparkan semula, tetapi kadangkala kami tidak mahu beberapa perubahan data mencetuskan pemaparan semula bagaimana untuk melarang perubahan Vue Nilai mencetuskan pemaparan semula.

Data dalam Vue adalah responsif

Data dalam rangka kerja Vue adalah responsif. Ini bermakna apabila data ditukar, Vue akan memaparkan semula data baharu dalam paparan. Ciri ini menjadikan pembangunan halaman lebih mudah dan lancar.

Sebagai contoh, apabila data berubah, komponen Vue berikut akan dipaparkan semula secara automatik:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
    },
  },
};
</script>

Dalam kod di atas, mesej ialah data responsif Vue, tetapi setiap kali butang Tukar Mesej adalah diklik Menyebabkan keseluruhan komponen dipaparkan semula, yang boleh menjejaskan prestasi. Inilah cara untuk mengelakkan perkara ini.

Gunakan kaedah $forceUpdate

Vue menyediakan kaedah komponen $forceUpdate() yang boleh memaksa komponen untuk dipaparkan semula. Walau bagaimanapun, kaedah $forceUpdate() tidak mencetuskan pemaparan semula secara mendalam. Ini bermakna jika anda menukar sekeping data, Vue hanya akan memaparkan semula komponen dan subkomponen yang mengandungi data tersebut.

Jika anda memanggil $forceUpdate() semasa kitaran pemaparan komponen, komponen akan memaparkan semula keseluruhan komponen, walaupun data tidak berubah. Oleh itu, kita boleh menghalang komponen daripada membuat dengan memanggil kaedah $forceUpdate() apabila data berubah. Contohnya:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
      this.$forceUpdate();
    },
  },
};
</script>

Dalam contoh di atas, kami memanggil kaedah $forceUpdate() sambil mengubah suai mesej data Dengan cara ini, Vue hanya akan memaparkan semula komponen tanpa menjejaskan prestasi komponen lain.

Gunakan kaedah vue-set

Vue menyediakan kaedah vue-set yang boleh menambah atau mengemas kini sifat responsif baharu pada objek. Kaedah ini biasanya digunakan untuk menambah elemen dom baharu, atau mengawal beberapa elemen yang tidak perlu dipaparkan dalam kitaran Vue. Menggunakan vue-set boleh mengelakkan masalah prestasi yang disebabkan oleh panggilan berulang untuk forceUpdate:

<template>
  <div>
    <p>The message start with "{{ message.charAt(0) }}"</p>
    <button @click="prependChar">Click me to add new char</button>
  </div>
</template>

<script>
import {set} from 'vue'

export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    prependChar() {
      const newChar = String.fromCharCode(
        this.message.charCodeAt(0) + 1
      );
      set(this.message, 0, newChar);
    },
  },
};
</script>

Dalam kod di atas, apabila kami mengklik butang, aksara baharu ditambahkan pada permulaan mesej dan menggunakan kaedah yang ditetapkan untuk memberitahu Vue untuk menambah sifat reaktif baharu supaya isu prestasi dengan kaedah forceUpdate dapat dielakkan.

Pemikiran Akhir

Dalam Vue, menukar data responsif akan mencetuskan pemaparan semula komponen, yang boleh menjadikan pembangunan kami lebih lancar. Tetapi kadangkala kita perlu mengurangkan bilangan pemaparan semula untuk meningkatkan prestasi halaman. Dalam artikel ini kami memperkenalkan cara untuk menghalang pemaparan komponen dengan memanggil kaedah $forceUpdate dan kaedah vue-set. Pada masa yang sama, kita perlu memberi perhatian kepada isu prestasi dan kecekapan kod, dan memilih kaedah yang sesuai untuk melaksanakan fungsi melumpuhkan pencetus perubahan nilai.

Atas ialah kandungan terperinci Vue mengubah nilai dan melarang pencetus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!