Perbezaan antara $emit, $nextTick dan $vnode dalam Vue

Vue ialah rangka kerja bahagian hadapan yang popular. Tiga konsep yang sering digunakan dalam pembangunan harian ialah $emit, $nextTick dan $vnode. Walaupun mereka kelihatan agak serupa, mereka masing-masing mempunyai fungsi dan senario penggunaan yang berbeza Mari kita pelajari tentang perbezaan mereka satu demi satu.

1. $emit

$emit ialah kaedah contoh dalam Vue, digunakan untuk berkomunikasi antara komponen induk dan komponen anak. Apabila komponen perlu menghantar maklumat kepada komponen induknya, ia boleh mencetuskan peristiwa tersuai melalui kaedah $emit dan membawa beberapa maklumat data. Komponen induk boleh mendengar acara tersuai yang sepadan dan mengendalikannya dengan sewajarnya.

Contohnya:

Gunakan kaedah $emit dalam komponen anak:

<button @click="$emit('add')">添加商品</button>

Dalam komponen induk, dengar acara tersuai dan laksanakan kaedah yang sepadan:

<template>
  <div>
    <my-component @add="addProduct"></my-component>
  </div>
</template>
<script>
export default {
  methods: {
    addProduct() {
      // TODO: 执行添加商品逻辑
    }
  }
}
</script>

2. $nextTick

$nextTick ialah kaedah contoh dalam Vue, digunakan untuk menyelesaikan masalah pemasaan operasi DOM dan kemas kini data tak segerak. Dalam Vue, pemaparan templat dilakukan secara tidak segerak Apabila data dikemas kini, Vue tidak mengemas kini elemen DOM dengan serta-merta. Sebaliknya, kemas kini DOM ditangguhkan ke tanda seterusnya Proses ini dipanggil "baris gilir kemas kini tak segerak".

Panggil kaedah $nextTick selepas kemas kini data untuk memastikan fungsi panggil balik dilaksanakan selepas kemas kini DOM selesai. Mekanisme ini sangat berguna. Ia boleh mengelakkan siri masalah yang disebabkan oleh elemen DOM yang beroperasi secara langsung selepas kemas kini DOM, dan ia juga boleh mengawal masa pemaparan komponen dengan lebih baik.

Contohnya:

<button @click="updateMsg">点击更新消息</button>

Dalam kaedah updateMsg, anda boleh menggunakan kaedah $nextTick untuk memastikan fungsi panggil balik dilaksanakan selepas kemas kini DOM selesai:

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    updateMsg() {
      this.msg = 'Vue is awesome!'
      this.$nextTick(() => {
        console.log(this.$el.textContent) // 'Vue is awesome!'
      })
    }
  }
}
</script>

3. $vnode

$vnode ialah atribut khas dalam Vue, yang mewakili nod maya yang sepadan dengan nod yang sedang diberikan. Ia adalah harta baca sahaja dan mempunyai $vnode yang sepadan pada setiap contoh komponen Vue.

Dalam kitaran hayat Vue, sifat $vnode akan dikemas kini setiap kali komponen dipaparkan semula dan boleh mewakili keadaan tika komponen semasa. Selain itu, atribut $vnode juga boleh digunakan untuk mendapatkan maklumat dengan mudah seperti hubungan ibu bapa-anak komponen dan nama komponen.

Contohnya:

<template>
  <div>
    <h1>{{ $vnode.componentOptions.Ctor.extendOptions.name }}</h1>
    <span>{{ $vnode.parent?.tag }}</span>
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>

Dalam kod di atas, $vnode.componentOptions.Ctor.extendOptions.name boleh mendapatkan nama komponen semasa, $vnode.parent?.tag boleh mendapatkan induk nama label Tahap komponen semasa.

Ringkasnya, walaupun $emit, $nextTick dan $vnode sangat serupa, mereka masing-masing mempunyai fungsi dan senario penggunaan yang berbeza. $emit digunakan untuk komunikasi antara komponen, $nextTick digunakan untuk mengawal pemasaan kemas kini DOM, dan $vnode digunakan untuk mendapatkan maklumat dan status komponen. Dalam pembangunan Vue, menggunakan sepenuhnya ciri ini boleh meningkatkan kebolehselenggaraan dan prestasi komponen dengan berkesan.

Atas ialah kandungan terperinci Perbezaan antara $emit, $nextTick dan $vnode dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!