Amalan yang baik untuk sifat yang dikira oleh Vue

vue.js Pengiraan atribut amalan terbaik: pemprosesan data yang cekap dan penyelenggaraan kod

Atribut pengiraan VUE.JS adalah ciri yang kuat yang membolehkan anda menetapkan dan menstabilkan data secara dinamik berdasarkan keadaan responsif. Penggunaan atribut pengiraan yang betul dapat menjadikan kod anda lebih ringkas, lebih efisien, dan lebih mudah dikekalkan. Walau bagaimanapun, penggunaan yang tidak betul boleh menyebabkan kesilapan dan masalah prestasi yang tidak dijangka.

Artikel ini akan memperkenalkan amalan terbaik atribut pengiraan VUE untuk membantu anda menggunakan sepenuhnya kelebihannya.

Apakah atribut pengiraan?

atribut pengkomputeran VUE adalah atribut khas dalam VUE, yang akan dikemas kini secara automatik apabila item pergantungan mereka berubah. Tidak seperti kaedah, mereka cache sehingga kebergantungan mereka berubah, yang menjadikan mereka pilihan yang berkesan untuk derivatif.

Berikut adalah contoh asas:

<code class="language-javascript">import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);</code>

di sini, selagi perubahan

atau firstName, lastName akan dikemas kini secara automatik tanpa secara manual -calculating. fullName

Amalan terbaik mengira atribut

Sekarang kita telah mempelajari apa atribut pengiraan Vue, marilah kita memahami amalan terbaik.

atribut pengiraan digunakan dalam status derivatif

Elakkan penggunaan atribut pengiraan secara langsung atau tetapkan. Sebaliknya, simpannya untuk pengiraan atau penukaran berdasarkan negeri yang sedia ada.

penggunaan yang betul:

<code class="language-javascript">const cartItems = ref([{ price: 10 }, { price: 15 }]);
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price, 0));</code>

Penggunaan ralat:

<code class="language-javascript">const cartItems = ref([]);
const addItem = computed(() => (item) => cartItems.value.push(item)); // 使用方法来修改状态</code>

Elakkan kesan sampingan dalam pengiraan atribut

atribut pengiraan harus murni tanpa kesan sampingan. Ini memastikan kebolehprediksi mereka dan hanya untuk mengira nilai.

penggunaan yang betul:

<code class="language-javascript">const items = ref([1, 2, 3]);
const doubledItems = computed(() => items.value.map(item => item * 2));</code>

Penggunaan ralat:

<code class="language-javascript">const items = ref([1, 2, 3]);
const doubledItems = computed(() => {
  console.log('Doubled items calculated'); // 副作用
  return items.value.map(item => item * 2);
});</code>

Pengiraan cache yang mahal

Salah satu kelebihan utama pengiraan atribut adalah mekanisme cache. Untuk pengiraan yang mahal, mekanisme ini boleh mengelakkan pengiraan semula yang tidak perlu.

<code class="language-javascript">const largeData = ref([...Array(1000000).keys()]);
const sum = computed(() => largeData.value.reduce((a, b) => a + b, 0));</code>

Buat harta pengkomputeran mengikat dua jalan dengan getter dan setter

Apabila anda memerlukan harta pengiraan yang boleh diperoleh dan menetapkan nilai, gunakan getter dan setter. Ini sangat berguna untuk derivatif yang mempengaruhi data responsif yang lain.

<code class="language-javascript">import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    const [first, last] = newValue.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
});</code>

Decompired Atribut yang dikira kompleks

Untuk kebolehbacaan dan penyelenggaraan, elakkan atribut pengkomputeran yang terlalu rumit. Sekiranya perlu, terurai ke bahagian yang lebih kecil dan boleh diguna semula.

<code class="language-javascript">const basePrice = ref(100);
const tax = ref(0.1);

const priceWithTax = computed(() => basePrice.value * (1 + tax.value));
const formattedPrice = computed(() => `$${priceWithTax.value.toFixed(2)}`);</code>

Ketahui lebih lanjut

Jika anda ingin mengetahui lebih lanjut mengenai Vue, Nuxt, JavaScript atau teknologi berguna lain, sila klik pautan di bawah atau gambar untuk melihat Vueschool:

Ringkasan Mengira atribut adalah alat penting untuk derivatif pengurusan kecekapan tinggi di VUE. Dengan mengikuti amalan terbaik, seperti mengelakkan kesan sampingan dan menggunakan logik kompleks dengan cache dan penguraian, anda dapat memastikan bahawa aplikasi anda mengekalkan prestasi tinggi dan penyelenggaraan. Dari hari ini, teknik -teknik ini digunakan untuk menulis lebih banyak komponen Vue yang ringkas dan teguh!

Saya doakan pengekodan gembira!

Atas ialah kandungan terperinci Amalan yang baik untuk sifat yang dikira oleh Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!