Jika Anda mencoba untuk mencari tahu di mana dari dua kerangka besar ini untuk memilih, baca pendapat pemrakarsa Vue tentang masalah ini, yang telah saya terjemahkan dan tambahkan.Diterjemahkan dengan dukungan dari platform cloud Mail.ru Cloud Solutions .Jadi, Anda adalah pengembang Bereaksi dan memutuskan untuk mencoba Vue. Ayo mulai!Bereaksi dan Vue adalah Coca-Cola dan Pepsi. Banyak hal yang dapat Anda lakukan dengan Bereaksi juga dapat dilakukan dengan Vue. Pada saat yang sama, ada beberapa perbedaan, beberapa di antaranya mencerminkan dampak kerangka Angular pada Vue.Artikel ini berfokus pada perbedaan, sehingga Anda akan segera terjun ke dunia Vue dan melihat manfaatnya.Berapa perbedaan React dan Vue?
Bereaksi dan Vue memiliki lebih banyak kesamaan daripada perbedaan:- Ini adalah dua perpustakaan untuk membuat UI;
- keduanya cepat dan ringan;
- memiliki arsitektur berorientasi komponen;
- gunakan pendekatan DOM Virtual;
- keduanya dapat dihubungkan langsung dalam file HTML atau sebagai modul dalam sistem pembangunan yang lebih kompleks di Webpack;
- keduanya memiliki pustaka pihak ketiga yang terpisah namun banyak digunakan untuk perutean dan manajemen negara.
Perbedaan yang mencolok adalah bahwa Vue biasanya menggunakan file template HTML, dan Bereaksi hanya menggunakan file JavaScript. Perpustakaan Vue juga memiliki keadaan bisa berubah dan sistem redraw template otomatis yang disebut reaktivitas.Komponen
Di perpustakaan Vue, komponen terhubung menggunakan metode API .componentyang mengambil argumen id dan objek dengan variabel definisi. Pengembang Bereaksi mungkin akan memperhatikan aspek akrab dan tidak dikenal dalam mendefinisikan komponen Vue dalam kode ini:Vue.component('my-component', {
props: [ 'myprop' ],
data() {
return {
firstName: 'John',
lastName: 'Smith'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
template: `
<div>
<p>Vue components typically have string templates.
<p>Here's some local state: {{ firstName }}
<p>Here's a computed value: {{ fullName }}
<p>Here's a prop passed down from the parent: {{ myprop }}
</div>
`,
created() {
setTimeout(() => {
this.message = 'Goodbye World'
}, 2000);
}
});
Templat
Seperti yang Anda lihat, komponen memiliki properti template, yang merupakan string dengan markup HTML. Pustaka Vue termasuk kompiler yang mengubah string ini menjadi fungsi render saat runtime. Fungsi rendering ini menggunakan mesin DOM Virtual.Anda tidak dapat menggunakan properti templatejika Anda memutuskan untuk membuat fungsi rendering sendiri. Anda bahkan dapat menggunakan markup JSX dari dunia Bereaksi. Tetapi akan aneh untuk beralih ke Vue dan melakukannya dengan cara ini - bagaimana datang ke Italia dan menolak pizza ...Kait siklus hidup
Komponen Vue memiliki metode siklus hidup yang mirip dengan komponen Bereaksi. Misalnya, kait createddari contoh di atas dimulai ketika status ( state) komponen sudah siap , tetapi sebelum komponen dilampirkan ke halaman. Bereaksi dari dunia - getDerivedStateFromProps.Tetapi ada satu perbedaan besar: di perpustakaan Vue tidak ada analog dari perpustakaan Bereaksi shouldComponentUpdate. Ini tidak perlu karena sistem reaktivitas Vue.Penataan ulang komponen
Salah satu langkah untuk menginisialisasi komponen adalah dengan melihat semua propertinya dan mengubahnya menjadi getter dan setter. Seperti yang Anda lihat, properti yang messagediambil dari data asli ( props) menerima dua metode tambahan - getdan set:Vue melampirkan fungsi-fungsi ini untuk memungkinkan pelacakan ketergantungan dan pemberitahuan perubahan properti ketika sebuah program membaca atau mengubahnya.Keadaan yang bisa berubah
Untuk mengubah status dalam Vue, Anda tidak perlu memanggil metode terpisah this.setState, seperti yang dilakukan dalam Bereaksi. Anda cukup menulis perubahan secara langsung:
this.setState({ message: 'Hello World' });
this.message = 'Hello World';
Ketika nilai status diubah dengan cara ini, metode setnilai ini dimulai (lihat di atas). Setmenulis nilai baru, tetapi ia juga memiliki tugas lain: ia memberi tahu perpustakaan bahwa nilai inilah yang telah berubah, dan bagian tata letak, yang tergantung pada nilai variabel ini di negara bagian, mungkin perlu digambar ulang.Jika variabel messagedilemparkan lebih jauh sebagai properti ( prop) ke dalam komponen turunan, maka perpustakaan mengingat ini, dan komponen turunan juga akan secara otomatis digambar ulang. Itu sebabnya perpustakaan Vue tidak memerlukan metode siklus hidup yang mirip dengan React shouldComponentUpdate.Template utama
Mengenai file templat proyek utama, Vue lebih seperti Angular. Seperti dalam Bereaksi, templat Vue perlu dipasang di suatu tempat di halaman:<body>
<div id="root"></div>
</body>
ReactDOM.render('...', document.getElementById('root'));
new Vue({
el: '#root'
});
Namun, tidak seperti Bereaksi, Anda dapat menambahkan tata letak reguler ke elemen root ini. Jika React menghapus semua yang ada di dalam elemen saat memasang komponen #root, maka Vue akan menghemat:<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
Ada juga cara untuk mendefinisikan template komponen anak dalam file html root melalui ekstensi HTML5 seperti x-template atau inline-template. Ini tidak dianggap praktik terbaik, karena memisahkan templat dari definisi seluruh komponen secara keseluruhan.Arahan
Sekali lagi, seperti dalam Angular, Vue memungkinkan Anda untuk memperluas kemampuan komponen menggunakan logika "arahan". Ada atribut HTML khusus dengan awalan v-, misalnya, v-ifuntuk rendering dengan kondisi atau v-binduntuk melampirkan ekspresi ke atribut HTML biasa:new Vue({
el: '#app',
data: {
mybool: true,
myval: 'Hello World'
}
});
<div id="app">
<div v-if="mybool">This renders if mybool is truthy.</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
Nilai yang ditetapkan untuk direktif adalah ekspresi JS, sehingga Anda kemudian dapat merujuk ke properti data, termasuk menggunakan operator ternary, dan sebagainya.Organisasi proyek
Tidak ada padanan resmi untuk bereaksi-membuat-aplikasi di perpustakaan Vue, namun ada build yang dibuat oleh komunitas pengembang Vue: create-vue-app.Rekomendasi resmi untuk memulai proyek pada Vue adalah vue-cli. Ini dapat menghasilkan segalanya dari proyek sederhana dengan satu file HTML hingga proyek Webpack + Server-Side Rendering yang penuh:$ vue init template-name project-name
Proyek dengan satu file HTML
Pencipta Vue.js, Ewan Yu (You Yu Xi), menyebut proyeknya "kerangka kerja progresif" karena dapat ditingkatkan untuk aplikasi yang kompleks atau disederhanakan untuk aplikasi kecil.Tentu saja, Bereaksi dapat melakukannya juga. Perbedaannya adalah bahwa proyek Vue biasanya menggunakan lebih sedikit fitur ES6 dan jarang menggunakan JSX, sehingga mereka tidak perlu mengubah kode menggunakan Babel. Plus, seluruh perpustakaan Vue cocok dalam satu file, tidak ada file terpisah untuk Bereaksi setara seperti ReactDOM.Berikut cara menambahkan Vue ke proyek dengan satu file HTML:<script src="https://unpkg.com/vue/dist/vue.js"></script>
Penting! Jika Anda tidak akan menggunakan string templat dan, karenanya, tidak memerlukan kompilator templat, gunakan versi pustaka yang disederhanakan yang tidak memiliki fungsi-fungsi ini - vue.runtime.js. Itu sekitar 20 KB kurang dari penuh.Komponen dalam satu file
Jika Anda cukup beruntung untuk menambahkan fase pembuatan proyek Anda menggunakan alat-alat seperti Webpack, Anda dapat menggunakan Komponen File Tunggal Vue (SFC, komponen Vue dalam satu file). Ini adalah file dengan ekstensi .vue, mereka merangkum template komponen, konfigurasi JS dan gaya dalam satu file:<template>
<div class="my-class">{{ message }}</div>
</template>
<script>
export default {
data() {
message: 'Hello World'
}
}
</script>
<style>
.my-class { font-weight: bold; }
</style>
Ini, tanpa diragukan lagi, adalah salah satu fitur paling luar biasa dari perpustakaan Vue, karena Anda mendapatkan templat HTML yang benar, tetapi logika JS ada di sana, tepat di sebelahnya, dan Anda tidak memiliki kurva pemisahan untuk presentasi dan logika.Ada Webpack-loader yang disebut vue-loader yang bertanggung jawab untuk membangun SFC. Selama proses perakitan, templat dikonversi ke fungsi rendering, dan ini sangat ideal untuk menggunakan vue.runtime.js rakitan stripped-down di browser.Redux dan yang lainnya
Vue memiliki perpustakaan manajemen negara berbasis Flux yang disebut Vuex. Kali ini mirip dengan Redux, tetapi ada beberapa perbedaan.Apa yang didapat pengembang saat beralih dari React ke Vue?
Untuk memahami sepenuhnya masalah ini, saya melengkapi artikel itu dan memberi tahu kapan lebih baik memilih Bereaksi, dan kapan harus Vue.Beralih ke Vue kemungkinan akan membuat lebih mudah bagi orang baru untuk memasuki proyek. Templat Vue dapat ditulis langsung dalam HTML. Juga, untuk proyek-proyek kecil, tidak perlu mengetahui fitur ES ++ terbaru dan mengkonfigurasi perakitan kode melalui alat-alat seperti Webpack dan Babel. Kode untuk Vue dapat ditulis dalam gaya jQuery, yaitu langsung ke template.Vue juga memiliki sistem pengiriman pesan status out-of-box yang nyaman. Pengembang tidak perlu repot dengan memanggil metode asinkron setState( seperti dalam Bereaksi ) atau menghubungkan pustaka eksternal untuk mengontrol pengiriman negara (seperti Mobx ).Akhirnya, aplikasi yang ditulis menggunakan Vue bisa terasa lebih mudah: sering kali hanya perpustakaan itu sendiri atau bahkan versi vue.runtime.js yang dilucuti akan diperlukan. Sementara pengembangan modern pada Bereaksi hampir tidak mungkin tanpa Babel dan bundel besar dengan berat hingga beberapa megabyte.Proyek Vue, di sisi lain, bisa terlalu rumit jika Anda memiliki aplikasi besar atau logika kompleks pada klien. Jika tata letak dilakukan dalam templat HTML, menjadi lebih sulit untuk menguji bagian-bagian aplikasi. React, yang hanya menggunakan kode JS, menyediakan lebih banyak fitur untuk menggunakan kembali dan memperluas kode. Juga, jika Anda menulis dalam React, Anda dapat menggunakan kembali kode Anda saat menulis aplikasi untuk perangkat yang menggunakan React-Native tanpa banyak biaya. Ini tidak terjadi dengan Vue.Oleh karena itu, kesimpulannya adalah sebagai berikut:Mail.ru Cloud Solutions.