Artikel yang menerangkan secara terperinci cara membatalkan langganan dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular, terutamanya digunakan secara meluas dalam pembangunan bahagian hadapan. Vue menyediakan banyak ciri mudah, salah satunya ialah fungsi langgan. Langganan ialah mekanisme acara yang melaluinya kami boleh memantau perubahan dalam data tertentu dalam tika Vue. Walau bagaimanapun, kadangkala kami perlu membatalkan langganan ini, yang memerlukan fungsi pembatalan yang disediakan oleh Vue. Artikel ini akan memperincikan cara membatalkan langganan Vue.

Asas langganan

Dalam Vue, langganan dilaksanakan melalui tontonan dan pengiraan. watch melaksanakan pendengaran dan panggil balik atribut data tertentu, dan dikira mengira nilai atribut berdasarkan nilai satu atau lebih atribut. Kami boleh mentakrifkan langganan melalui jam tangan dan dikira, contohnya:

data() {
  return {
    name: '',
    age: '',
    fullName: '',
  }
},
watch: {
  name: function(newName) {
    this.fullName = 'My name is ' + newName
  },
  age: function(newAge) {
    this.fullName = 'I am ' + newAge + ' years old'
  }
}
computed: {
  getFullName: function() {
    return this.fullName
  }
}

Dalam kod di atas, kami mentakrifkan tiga atribut data, iaitu nama, umur dan Nama penuh. Dalam jam tangan, kami mentakrifkan dua fungsi panggil balik untuk memantau perubahan dalam nama dan umur masing-masing Apabila nama atau umur berubah, fungsi panggil balik akan mengubah nilai nama penuh. Dalam pengiraan, kami mentakrifkan harta terkira getFullName untuk mendapatkan fullName. Dengan cara ini, apabila langganan berkuat kuasa, kami boleh memantau perubahan dalam nama dan umur serta mendapatkan fullName terkini melalui getFullName.

Nyahlanggan

Sekarang kami tahu cara melanggan data dalam contoh Vue, tetapi apakah yang perlu kami lakukan apabila kami mahu berhenti melanggan?

Vue menyediakan dua kaedah untuk berhenti melanggan: satu adalah melalui fungsi yang dikembalikan oleh kaedah jam tangan, dan satu lagi adalah melalui atribut cache bagi atribut yang dikira.

Nyahlanggan melalui jam tangan

Dalam Vue, kaedah jam tangan akan mengembalikan fungsi ini boleh digunakan untuk membatalkan pendengar berdaftar dan melaksanakan fungsi nyahlanggan. Sebagai contoh, kita boleh menghantar harta daripada komponen induk kepada komponen anak dan mendengar perubahan dalam sifat ini dalam komponen anak:

// 父组件
<template>
  <child-component :propA="propA" />
</template>
<script>
export default {
  data() {
    return {
      propA: '',
    }
  }
}
</script>

// 子组件
<script>
export default {
  props: ['propA'],
  watch: {
    propA(newPropA, oldPropA) {
      // do something
    }
  }
}
</script>

Dalam kod di atas, kita mendengar propA dalam komponen anak. melalui kaedah jam tangan Perubahan dalam sifat. Apabila komponen induk mengubah suai sifat propA, kaedah jam tangan komponen anak akan dicetuskan dan panggilan balik yang sepadan akan dilaksanakan. Pada masa yang sama, kaedah jam tangan mengembalikan fungsi Kita boleh memanggil fungsi ini apabila komponen dimusnahkan untuk membatalkan pemantauan atribut propA dan melaksanakan fungsi berhenti melanggan:

// 子组件
<script>
export default {
  props: ['propA'],
  data() {
    return {
      unwatch: null
    }
  },
  created() {
    this.unwatch = this.$watch('propA', (newPropA, oldPropA) => {
      // do something
    })
  },
  beforeDestroy() {
    this.unwatch()
  }
}
</script>

Dalam kod di atas, kita berada dalam subkomponen Panggil kaedah jam tangan dalam cangkuk yang dibuat dan simpan fungsi yang dikembalikan ke pembolehubah nyahjam. Sebelum komponen dimusnahkan, kami memanggil fungsi unwatch untuk membatalkan pemantauan atribut propA dan melaksanakan fungsi nyahlangganan.

Nyahlanggan melalui pengiraan

Selain menyahlanggan melalui fungsi yang dikembalikan oleh kaedah jam tangan, kami juga boleh melaksanakan fungsi nyahlanggan melalui atribut cache bagi atribut yang dikira. Sifat cache bagi sifat yang dikira Sifat yang dikira ialah sifat yang dicache apabila kebergantungannya tidak berubah. Ia meningkatkan prestasi aplikasi dengan menghapuskan keperluan untuk sifat yang dikira untuk dikira semula setiap kali.

Dalam Vue, apabila kami menggunakan harta yang dikira untuk mengira nilai harta, pengkompil akan mencipta sifat cache untuk harta ini. Sifat cache ini ialah sifat dalaman dan nilainya ialah nilai terkini bagi harta yang dikira. Kami boleh membatalkan langganan kepada harta yang dikira dengan mengakses harta cache ini, dengan itu mencapai fungsi nyahlangganan. Contohnya:

// 组件
<template>
  <div>
    <p>Value: {{ value }}</p>
    <button @click="stopSubscribe">Stop subscribe</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 0,
    }
  },
  computed: {
    doubleValue() {
      return this.value * 2
    }
  },
  methods: {
    stopSubscribe() {
      this.doubleValue
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen yang mengandungi sifat nilai dan sifat terkira doubleValue. Kami membatalkan langganan harta terkira ini dengan mengakses sifat doubleValue untuk melaksanakan fungsi pembatalan.

Kesimpulan

Langganan ialah fungsi yang sangat penting dalam Vue, yang boleh membantu kami memantau perubahan data dan bertindak balas dalam masa. Pada masa yang sama, apabila kami tidak lagi perlu memantau perubahan data, kami juga boleh membatalkan langganan dengan mudah. Melalui penjelasan di atas, saya percaya anda telah memahami cara membatalkan langganan Vue. Saya harap artikel ini dapat membantu semua orang!

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara membatalkan langganan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!