Panduan Pemula untuk VUE3: Data Responsif dan Sifat Dikira

Dalam rangka kerja bahagian hadapan moden, data reaktif dan sifat yang dikira adalah konsep yang sangat penting. Sebagai pemula Vue3, selepas mempelajari kedua-dua konsep ini, anda boleh lebih memahami ciri dan penggunaan rangka kerja Vue.

Artikel ini akan menumpukan pada menerangkan data responsif Vue3 dan sifat pengiraan, termasuk konsep asas, penggunaan dan contohnya. Jika anda belum biasa dengan Vue3, sila pelajari asas Vue3 terlebih dahulu.

1. Apakah itu data responsif?

Dalam Vue3, data responsif ialah data yang boleh menjejaki perubahan secara automatik dan mengemas kini halaman serta-merta. Dalam Vue3, data responsif boleh menjadi objek JavaScript biasa, jenis data primitif, tatasusunan, dsb.

Menggunakan data responsif dalam Vue3 adalah sangat mudah Anda hanya perlu menentukan atribut yang sepadan dalam objek data. Rangka kerja Vue akan melengkapkan pengikatan data berdasarkan sifat ini untuk mencapai ciri responsif.

Contohnya:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

Dalam kod di atas, kami mentakrifkan objek data dan mentakrifkan mesej atribut di dalamnya. Dalam templat, kami menggunakan ungkapan perbezaan {{ mesej }} untuk memaparkan atribut ini. Apabila kami mengubah suai nilai mesej, kandungan pada halaman akan dikemas kini secara automatik.

2. Apakah itu atribut yang dikira?

Dalam Vue3, sifat terkira ialah sifat yang digunakan dalam templat yang dikira berdasarkan nilai sifat lain. Nilai harta yang dikira dicache dan hanya dikira semula apabila harta itu bergantung pada perubahan.

Menggunakan sifat yang dikira dalam Vue3 juga sangat mudah Anda hanya perlu menentukan sifat yang sepadan dalam objek yang dikira. Setiap sifat dalam objek yang dikira mestilah fungsi dan mengembalikan nilai yang dikira.

Contohnya:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan dua atribut data: firstName dan lastName. Kami juga mentakrifkan atribut fullName yang dikira, yang mengira nilai baharu, nama penuh, berdasarkan nilai firstName dan lastName. Pada masa ini, nilai fullName akan dicache dan tidak akan dikira semula sehingga firstName atau LastName berubah.

3. Contoh data responsif dan sifat dikira

Berikut ialah contoh mudah yang menunjukkan cara menggunakan data responsif dan sifat terkira untuk melaksanakan fungsi troli beli-belah yang mudah.

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan objek data, yang mengandungi dua atribut: item dan troli. item mewakili senarai produk, dan troli mewakili troli beli-belah.

Kami juga mentakrifkan jumlah atribut yang dikira untuk mengira jumlah harga troli beli-belah berdasarkan harga dan kuantiti setiap item dalam troli.

Akhirnya kami juga menentukan dua kaedah: addToCart dan removeFromCart. addToCart digunakan untuk menambah produk yang dinyatakan pada troli beli-belah, dan removeFromCart digunakan untuk mengalih keluar produk yang ditentukan daripada troli beli-belah.

Apabila menggunakan komponen ini, kami hanya perlu memperkenalkan dan menghantar prop dalam komponen induk, dan Vue3 akan melengkapkan pengikatan data dan pemaparan komponen secara automatik.

Ringkasan

Data responsif dan sifat pengiraan Vue3 ialah salah satu ciri teras rangka kerja Vue3, dan menguasainya adalah penting untuk pembangun Vue3.

Dalam Vue3, data responsif boleh menjejaki perubahan secara automatik dan mengemas kini halaman dengan segera Atribut yang dikira boleh mengira nilai atribut baharu berdasarkan nilai atribut lain dan menyimpan hasil pengiraan.

Dengan contoh troli beli-belah yang ringkas, kami menunjukkan cara menggunakan data responsif Vue3 dan sifat pengiraan untuk melaksanakan antara muka yang sangat dinamik. Jika anda ingin mempelajari Vue3 dengan lebih baik, sila kaji ia dalam kombinasi dengan dokumentasi rasmi Vue3 dan artikel lain yang berkaitan.

Atas ialah kandungan terperinci Panduan Pemula untuk VUE3: Data Responsif dan Sifat Dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!