Vue terdedah kepada ralat

Vue ialah rangka kerja JavaScript popular yang menggunakan model pengaturcaraan yang ringkas dan mudah digunakan untuk membantu pembangun membina aplikasi web dinamik. Vue boleh menyediakan struktur organisasi yang lebih baik, kebolehselenggaraan dan kebolehujian semasa proses pembangunan, tetapi masih terdapat beberapa titik rawan ralat dalam proses menggunakan Vue. Artikel ini akan membincangkan perkara yang terdedah kepada ralat ini dan penyelesaiannya untuk membantu anda menggunakan Vue dengan lebih cekap.

1. Templat ditulis tanpa menggunakan "v-bind" atau notasi trengkas

Apabila menggunakan Vue, sistem templat biasanya mengendalikan interpolasi dan pengikatan sifat secara automatik. Contohnya, kod berikut:

<div class="mycomponent" :title="mytitle">{{ message }}</div>

akan mengikat nilai pembolehubah mytitle pada atribut title elemen dan memasukkan nilai pembolehubah message ke dalam kandungan teks elemen.

Walau bagaimanapun, adalah mungkin untuk mengikat harta tanpa menggunakannya sebelum v-bind atau simbol singkatan :. Kod berikut:

<input type="text" value="{{ message }}">

tidak menghasilkan hasil yang diharapkan. Sebaliknya, ia hendaklah ditulis seperti ini:

<input type="text" :value="message">

2. Rujukan kepada objek data

Sifat dalam objek data Vue tidak seharusnya sama dengan rujukan objek lain. Contohnya, kod berikut:

var data = { message: 'Hello' };
new Vue({ data: data });

Kemudian dalam kod, data.message boleh diubah suai, tetapi ia tidak akan ditunjukkan dalam aplikasi. Ini kerana objek data telah pun dibalut oleh Vue sekali sebelum dihantar kepada pembina Vue, yang bermaksud kami mengubah suai objek salinan yang diabaikan, bukan objek data dalam contoh Vue.

Penyelesaiannya ialah mencipta objek data baharu untuk setiap tika Vue.

new Vue({ data: { message: 'Hello' }});

3. Kekeliruan sifat dan kaedah yang dikira

Sifat dan kaedah yang dikira dalam Vue adalah dua perkara yang berbeza, perbezaannya ialah sifat yang dikira adalah berdasarkan caching kebergantungan bagi. Iaitu, sifat yang dikira hanya dipanggil apabila kebergantungan berubah. Sebaliknya, kaedah itu dipanggil pada setiap akses.

Jika kebergantungan tidak digunakan dalam templat Vue, Vue tidak akan mengesan "pencetus" yang sepatutnya mengira semula sifat yang dikira.

Penyelesaian adalah untuk memastikan sifat yang dikira ditakrifkan sebagai fungsi dengan kebergantungan. Walaupun kebergantungan adalah dinamik, anda boleh menggunakan fungsi untuk mengembalikannya.

4. Isu perkongsian data komponen

Apabila menghantar objek atau tatasusunan melalui props, jika anda menukar sifat salah satu objek atau tatasusunan, Vue tidak akan mengesan berubah. Kerana ia hanya menjejaki rujukan yang diluluskan. Ini boleh menyebabkan kesan sampingan yang tidak dijangka.

Penyelesaian adalah untuk memastikan tidak menukar objek atau tatasusunan secara langsung yang diluluskan oleh komponen induk dalam komponen anak. Jika anda mesti menukar, anda boleh menggunakan kaedah Object.assign() atau Array.prototype.slice() untuk menjana objek atau tatasusunan baharu.

// 父组件
<template>
  <child-component :data="data"></child-component>
</template>

<script>
export default {
  data() {
    return {
      data: { message: 'Hello' }
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ data.message }}</div>
</template>

<script>
export default {
  props: ['data'],
  created() {
    // 以下代码将会更改祖先组件中的 "data" 对象
    this.data.message = 'Changed';
  }
}
</script>

// 正确的写法
<template>
  <div>{{ localData.message }}</div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return { localData: Object.assign({}, this.data) }
  },
  created() {
    this.localData.message = 'Changed';
  }
}
</script>

5. Masalah dengan komponen tak segerak

Vue menyediakan fungsi pemuatan komponen tak segerak, yang boleh digunakan untuk menangguhkan pemuatan komponen untuk mengoptimumkan prestasi aplikasi. Walau bagaimanapun, semasa pembangunan komponen tersebut boleh menyebabkan beberapa masalah. Sebagai contoh, jika komponen induk telah selesai memaparkan dan mula melaksanakan sebelum pemuatan tak segerak komponen selesai, komponen anak tidak akan dipaparkan dengan betul.

Penyelesaian adalah dengan menggunakan pilihan loading komponen async dalam komponen anak. Pilihan loading boleh memaparkan pemegang tempat sebelum komponen dipaparkan.

Vue.component('my-component', function(resolve) {
  setTimeout(function() {
    resolve({
      template: '<div>Hello</div>'
    });
  }, 1000);
});

<template>
  <div>
    <my-component v-if="showComponent" />
    <div v-else>Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return { showComponent: false }
  },
  components: {
    'my-component': () => import('./MyComponent.vue'),
  },
  created() {
    setTimeout(() => this.showComponent = true, 1000)
  }
}
</script>

Ringkasan

Vue ialah rangka kerja berkuasa yang boleh membantu kami membina aplikasi web dengan lebih cekap. Walau bagaimanapun, apabila menggunakan Vue, kita perlu memberi perhatian kepada beberapa titik yang terdedah kepada ralat untuk memastikan bahawa fungsi yang disediakan oleh rangka kerja digunakan dengan betul. Dalam artikel ini, kami membincangkan beberapa perkara dan penyelesaian biasa yang terdedah kepada ralat, dengan harapan dapat membantu anda dalam proses menggunakan Vue.

Atas ialah kandungan terperinci Vue terdedah kepada ralat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!