Cara mengoptimumkan prestasi aplikasi secara kolaboratif melalui atribut pengiraan dan atribut jam tangan Vue

Cara mengoptimumkan prestasi aplikasi secara kolaboratif melalui sifat pengiraan Vue dan sifat menonton

Pengenalan:
Vue ialah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna Konsep terasnya adalah untuk mengikat data dan pandangan secara dua hala. Dalam pembangunan sebenar, kita selalunya perlu memproses beberapa data yang memerlukan pengiraan atau pemantauan masa nyata, seperti pengesahan borang, penapisan data, dsb. Untuk meningkatkan prestasi aplikasi, Vue menyediakan atribut yang dikira dan atribut jam tangan untuk mengendalikan keperluan ini secara kolaboratif. Artikel ini akan memperkenalkan cara menggunakan atribut yang dikira dan atribut menonton untuk mengoptimumkan prestasi aplikasi dan memberikan contoh kod yang sepadan.

1. Penggunaan atribut yang dikira
Atribut yang dikira membolehkan kami mengisytiharkan beberapa sifat berdasarkan kebergantungan responsif dan merangkum logik pengiraan di dalamnya. Vue akan mengemas kini secara automatik nilai sifat yang dikira berdasarkan perubahan dalam kebergantungan yang berkaitan untuk memastikan ia sentiasa terkini.

1.1 Sintaks asas
Mengisytiharkan atribut yang dikira dalam komponen Vue adalah sangat mudah Anda hanya perlu mentakrifkan fungsi dalam atribut yang dikira bagi komponen tersebut. Contohnya:

computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Dalam kod di atas, kami mentakrifkan atribut fullName yang dikira, yang mengembalikan nama lengkap selepas gabungan firstName dan lastName.

1.2 Cache Pengiraan
Ciri penting atribut yang dikira ialah cache pengiraan. Apabila data responsif yang atribut yang dikira bergantung pada perubahan, atribut yang dikira akan dikira semula dan hasil pengiraan akan dicache. Apabila harta yang dikira diakses pada masa akan datang, jika tiada kebergantungan berkaitan telah berubah, Vue akan terus mengembalikan nilai cache tanpa mengira semula.

Mekanisme cache pengiraan ini sangat meningkatkan prestasi, terutamanya apabila atribut yang dikira memerlukan sumber pengkomputeran yang besar, seperti operasi penapisan tatasusunan.

1.3 Contoh
Berikut ialah kod sampel menggunakan atribut yang dikira:

<template>
  <div>
    <input v-model="firstName" type="text" placeholder="请输入姓">
    <input v-model="lastName" type="text" placeholder="请输入名">
    <p>{{ fullName }}</p>
  </div>
</template>

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

Dalam kod di atas, kami mengikat dua hala elemen input dan atribut data komponen melalui arahan model-v. Kemudian gunakan {{Nama penuh }} dalam templat untuk memaparkan hasil pengiraan. Apabila firstName atau LastName berubah, Vue akan mengemas kini nilai fullName secara automatik dan memberikan hasil kemas kini ke halaman.

2. Penggunaan atribut jam tangan
Atribut jam tangan membolehkan kami memantau perubahan data tertentu dan melakukan operasi yang sepadan apabila data berubah. Tidak seperti atribut yang dikira, atribut jam tangan tidak melakukan pengiraan, tetapi melaksanakan logik tersuai selepas data berubah.

2.1 Sintaks asas
Mengisytiharkan atribut jam tangan dalam komponen Vue juga sangat mudah Anda hanya perlu mentakrifkan fungsi dalam atribut jam tangan komponen tersebut. Contohnya:

watch: {
    firstName(newValue, oldValue) {
        console.log(`firstName从${oldValue}变为${newValue}`);
    }
}

Dalam kod di atas, kami mentakrifkan atribut jam tangan untuk memantau perubahan nama pertama dan mencetak nilai sebelum dan selepas perubahan apabila ia berubah.

2.2 Pemantauan Dalam
Secara lalai, Vue hanya memantau perubahan dalam sifat langsung objek atau tatasusunan. Jika anda perlu memantau secara mendalam perubahan semua atribut dalam objek atau tatasusunan, anda boleh menggunakan atribut dalam dalam atribut jam tangan. Contohnya:

watch: {
    obj: {
        handler(newValue, oldValue) {
            console.log('obj发生变化');
        },
        deep: true
    }
}

Dalam kod di atas, kami memantau dengan mendalam perubahan objek bernama obj Apabila sebarang atribut dalam obj berubah, fungsi pemprosesan yang sepadan akan dicetuskan. Ini berguna untuk mendengar perubahan dalam objek.

2.3 Pemantauan Asynchronous
Kadangkala kami ingin melakukan beberapa operasi tak segerak selepas perubahan data, seperti menghantar permintaan atau mengemas kini cache. Vue membenarkan mentakrifkan fungsi tak segerak yang dipanggil pengendali dalam atribut jam tangan untuk mengendalikan situasi ini. Contohnya:

watch: {
    firstName(newValue, oldValue) {
        this.debouncedGetData();
    }
},
methods: {
    debouncedGetData: debounce(function() {
        // 异步操作
    }, 500)
}

Dalam kod di atas, kami menggunakan fungsi nyahpantun dalam pustaka lodash untuk mengehadkan kekerapan memanggil ini.debouncedGetData untuk memastikan bahawa hanya satu operasi tak segerak dilakukan dalam masa 500 milisaat.

3. Penggunaan kolaboratif atribut pengiraan dan atribut jam tangan
Atribut yang dikira dan atribut jam tangan boleh digunakan secara kolaboratif, dan ia tidak saling eksklusif. Dalam pembangunan sebenar, kita boleh memilih secara fleksibel salah satu daripada dua mengikut keperluan yang berbeza, atau menggunakan kedua-duanya pada masa yang sama.

Apabila menggunakan atribut yang dikira, anda perlu mengambil kira ciri-ciri cache pengiraan, yang sesuai untuk hasil yang bergantung pada pengiraan data responsif yang lain. Apabila menggunakan atribut jam tangan, biasanya untuk memantau perubahan dalam data responsif dan melaksanakan operasi yang sepadan, yang sesuai untuk senario yang memerlukan respons segera kepada perubahan data.

Sebagai contoh, kita boleh menggunakan atribut yang dikira untuk mengira jumlah harga troli beli-belah:

computed: {
    totalPrice() {
        return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
    }
}

Dan gunakan atribut jam tangan untuk memantau perubahan kuantiti produk dalam troli beli-belah dan mengemas kini jumlah harga apabila ia perubahan:

watch: {
    'cart': {
        handler(newValue, oldValue) {
            this.totalPrice = this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
        },
        deep: true
    }
}

Dalam kod di atas, kami memantau perubahan dalam troli beli-belah (cart) Apabila kuantiti produk dalam troli beli-belah berubah, jumlah harga (totalPrice) akan dikira semula dan dikemas kini.

Kesimpulan:
Dalam amalan pembangunan Vue, penggunaan rasional atribut pengiraan dan atribut jam tangan boleh meningkatkan prestasi aplikasi dan kecekapan pembangunan. Atribut yang dikira boleh menjimatkan sumber pengkomputeran dan melaksanakan logik perniagaan yang kompleks manakala atribut jam tangan boleh memantau perubahan data dan melaksanakan operasi yang sepadan untuk memenuhi beberapa keperluan khas. Penggunaan fleksibel kedua-dua ciri ini mengikut situasi tertentu boleh menjadikan kod lebih ringkas dan elegan.

Atas ialah kandungan terperinci Cara mengoptimumkan prestasi aplikasi secara kolaboratif melalui atribut pengiraan dan atribut jam tangan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!