Tutorial asas VUE3: dikira menggunakan rangka kerja responsif Vue.js

Vue.js ialah rangka kerja JavaScript sumber terbuka yang menggunakan corak MVVM (Model-View-ViewModel) dan bertujuan untuk menyediakan cara yang mudah dan fleksibel untuk membina antara muka pengguna. Antaranya, rangka kerja reaktif ialah salah satu ciri terpenting Vue.js, yang membolehkan pembangun melakukan kemas kini data yang mengikat dan responsif dua hala. Dalam Vue.js, pengiraan adalah salah satu konsep penting. Artikel ini akan memperkenalkan penggunaan asas dan contoh pengiraan.

1.

dikira ialah sifat dalam Vue.js, yang boleh merealisasikan fungsi pengiraan sifat secara dinamik. Dalam erti kata lain, pengiraan boleh mengira nilai baharu secara dinamik berdasarkan data yang bergantung padanya, dan sifat yang dikira akan dikemas kini secara automatik apabila data ia bergantung pada perubahan. Tidak seperti kaedah, pengiraan adalah harta yang dikira dan bukannya kaedah.

2. Penggunaan asas pengiraan

Atribut yang dikira boleh ditakrifkan dengan cara berikut:

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Dalam kod di atas, kami mentakrifkan atribut yang dikira bagi reversedMessage, iaitu hasil Pengiraan berdasarkan atribut mesej.

Seterusnya, kami akan menggunakan atribut yang dikira dalam templat HTML. Untuk mendapatkan nilai atribut yang dikira, kami tidak lagi mengikat mesej secara langsung, tetapi menggunakan atribut yang dikira, seperti yang ditunjukkan di bawah:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

Dalam templat, kita boleh menggunakan ungkapan perbezaan {{ }} untuk memaparkan pengiraan Nilai atribut. Memandangkan kami telah mentakrifkan reversedMessage sebagai harta yang dikira, Vue.js secara automatik melakukan pengiraan dan mengemas kini paparan.

3. Mekanisme caching untuk dikira

Apabila data yang bergantung pada atribut yang dikira berubah, dikira akan mengira semula dan mengemas kini paparan secara automatik. Walau bagaimanapun, apabila data yang bergantung pada atribut yang dikira tidak berubah, yang dikira akan mengingati hasil pengiraan terakhir dan terus mengembalikan nilai terakhir. Mekanisme caching ini boleh meningkatkan prestasi dan kecekapan aplikasi.

Sebagai contoh, dalam kod berikut, kami mentakrifkan atribut yang dikira fullName:

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

Apabila kami mengakses fullName buat kali pertama, konsol akan mengeluarkan mesej "dikira". Walau bagaimanapun, apabila kami mengubah suai nilai atribut firstName atau lastName, dikira tidak akan mengira semula setiap kali, tetapi secara langsung mengembalikan hasil pengiraan terakhir.

4. Perbezaan antara kaedah pengiraan dan kaedah

Kedua-dua kaedah pengiraan dan kaedah boleh digunakan untuk melaksanakan fungsi atribut pengiraan secara dinamik Perbezaan utamanya terletak pada mekanisme caching atribut yang dikira.

Dalam contoh, kami mentakrifkan sifat terkira fullName dan kaedah getFullName:

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

Dalam templat, kami boleh memanggil fullName dan getFullName dengan cara berikut:

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

Kami mendapati bahawa apabila memanggil kaedah getFullName, ia dikira semula setiap kali dan hasil cache tidak digunakan. Oleh itu, jika kita perlu memanggil kaedah dengan kerap, menggunakan atribut yang dikira boleh meningkatkan prestasi dan kecekapan aplikasi.

5. Contoh yang dikira

Berikut ialah contoh pengiraan jumlah harga troli beli-belah Kami menganggap bahawa struktur data troli beli-belah adalah seperti berikut:

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

Dalam templat, kami boleh Gunakan atribut yang dikira untuk memaparkan jumlah harga troli beli-belah:

<div id="example">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
      <tr>
        <td colspan="3">总价：</td>
        <td>{{ totalPrice }}</td>
      </tr>
    </tbody>
  </table>
</div>

Dalam contoh di atas, kami mentakrifkan jumlah atribut yang dikira yang bergantung pada harga dan kuantiti semua item dalam tatasusunan item. Apabila harga atau kuantiti mana-mana item dalam tatasusunan berubah, Vue.js akan mengira semula jumlah harga dan mengemas kini paparan secara automatik.

6. Ringkasan

Dalam Vue.js, pengiraan ialah ciri yang sangat berkuasa dan penting. Ia adalah kunci untuk merealisasikan sifat yang dikira secara dinamik. Mekanisme caching bagi sifat yang dikira boleh meningkatkan prestasi dan kecekapan aplikasi. Tidak seperti kaedah, pengiraan adalah harta yang dikira dan bukannya kaedah. Dengan mempelajari dan menggunakan pengiraan, kami boleh membina aplikasi Vue.js yang cemerlang dengan lebih mudah dan cekap.

Atas ialah kandungan terperinci Tutorial asas VUE3: dikira menggunakan rangka kerja responsif Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!