Perbedaan coding antara React dengan Vue

TRANSLATED FROM https://readmedium.com/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd

Saat menggunakan Vue di tempat kerja, saya mendapatkan pemahaman yang cukup kuat tentang Vue. Namun, saya penasaran ingin mengetahui seperti apakah rumput tetangga sebelah— rumput yang dimaksud dalam konteks ini adalah React.

Saya telah membaca dokumen React dan menonton beberapa video tutorial React, dan meskipun semuanya hebat, yang benar-benar ingin saya ketahui adalah “perbedaan” antara React dari Vue. Bukan hal-hal seperti, apakah mereka mempunyai DOM virtual atau bagaimana mereka melakukan rendering halaman. Saya ingin seseorang meluangkan waktu untuk menjelaskan kode. Saya ingin menemukan artikel yang menjelaskan hal ini sehingga seseorang yang baru mengenal Vue atau React (atau Pengembangan Web secara keseluruhan) dapat memperoleh pemahaman yang lebih baik tentang perbedaan antara keduanya.

Sayangnya, saya tidak dapat menemukan hal tersebut. Oleh karena itu, saya akan mencari persamaan dan perbedaannya, juga akan mendokumentasikan seluruh prosesnya agar tersedia artikel mengenai hal ini.

Saya memutuskan untuk mencoba membangun Aplikasi Agenda (To do App) yang cukup standar, yang memungkinkan pengguna untuk menambah dan menghapus item dari daftar. Kedua aplikasi dibangun menggunakan default CLI masing2 (create-react-app untuk React, dan vue-cli untuk Vue).CLI adalah singkatan dari Command Line Interface. 🤓

Pembukaan ini ternyata sudah lebih lama dari yang diperkirakan. Mari kita mulai dengan melihat bagaimana penampakan kedua aplikasi:

Kode CSS untuk kedua aplikasi tersebut terlihat sama persis, tetapi ternyata ada perbedaan di letak lokasi file. Mari kita lihat struktur file kedua aplikasi:

Anda akan melihat bahwa struktur mereka juga hampir sama. Satu-satunya perbedaan disini adalah bahwa aplikasi react memiliki tiga file CSS, sedangkan aplikasi Vue tidak punya. Alasannya adalah karena dalam boilerplate create-react-app, komponen react akan memiliki file style yang terpisah, sedangkan Vue CLI mengadopsi pendekatan satu file untuk semua, dimana style dimasukan di dalam file komponen.

Pada akhirnya, keduanya mempunyai hasil yang sama, dan tidak ada yang mengatakan bahwa Anda tidak dapat membuat CSS Anda secara terpisah dalam React atau Vue. Itu benar-benar tergantung ke preferensi pribadi — Anda akan mendengar banyak diskusi dari komunitas developer mengenai bagaimana CSS harus disusun. Untuk saat ini, kita hanya akan mengikuti struktur yang ditetapkan dalam kedua CLI.

Tapi sebelum kita melangkah lebih jauh, mari kita lihat seperti apa komponen Vue dan React yang khas:

Sekarang, mari kita perhatikan seluk beluknya lebih detail.

Bagaimana cara kita memutasi data?

Tetapi pertama-tama, apa yang dimaksud dengan “mutasi data”? Kedengarannya agak teknis? Ini pada dasarnya hanya berarti mengubah data yang telah kita simpan. Jadi jika kita ingin mengubah nilai nama seseorang dari John ke Mark, kita akan ‘bermutasi data’. Jadi disinilah perbedaan utama antara React dan Vue. Vue pada dasarnya menciptakan objek data, dimana data dapat secara bebas diperbarui. Sedangkan React menciptakan objek state, dimana diperlukan sedikit kerja keras untuk melakukan pembaruan. Implementasi dalam react memerlukan sedikit kerja ekstra karena alasan yang baik, dan kita akan membahasnya sedikit lagi. Tapi pertama-tama, mari kita lihat objek data dari Vue dan objek state dari React:

Vue data object sebelah kiri. React state object sebelah kanan.

Anda dapat melihat bahwa kita telah memiliki data yang sama antara keduanya. Membuat data awal ke dalam komponen sangatlah mirip, tetapi seperti yang telah kita sebutkan, cara bagaimana kita mengubah data itulah yang berbeda antara kedua framework.

Katakanlah kita memiliki elemen data name: ‘Sunil’ .

Di Vue, kita mereferensikan elemen data itu dengan memanggil this.name . Kita juga bisa memperbarui dengan memanggil this.name = ‘John’ . Ini akan mengubah nama menjadi John.

Di React, kita akan mereferensikan data yang sama dengan memanggil this.state.name . Sekarang perbedaan utama di sini adalah kita tidak bisa begitu saja menulis this.state.name = ‘John’, karena React memiliki batasan untuk mencegah melakukan mutasi yang mudah seperti ini. Didalam React, kita menulisnya dengan this.setState ({name: ‘John’}) .

Walaupun pada dasarnya ini melakukan hal yang sama, tapi Vue pada dasarnya menggabungkan versi setState sendiri secara default setiap kali data diperbarui. Jadi singkatnya, React membutuhkan setState untuk memperbaharui data, sedangkan Vue membuat asumsi sendiri bahwa jika anda melakukan ini, maka anda ingin memperbarui nilai di dalam objek data. Tapi mengapa React repot repot dengan hal ini, dan mengapa setState bahkan diperlukan? Mari serahkan ini kepada Revanth Kumar untuk penjelasan:

“Ini karena React ingin mengulang / menjalankan kembali dalam setiap lifecycle (siklus hidup) tertentu, [seperti] componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate kapanpun state dirubah. Dengan itu, kita akan mengetahui bahwa state berubah di saat kita memanggil fungsi setState. Jika Anda secara langsung mutasi state, React harus melakukan lebih banyak pekerjaan untuk melacak perubahan dalam lifecycle (siklus hidup) mana hooks dijalankan dll. Jadi, untuk membuatnya sederhana, React menggunakan setState. “

Sekarang setelah kita membahas mengenai mutasi, mari masuk ke seluk-beluk lain, dengan melihat cara kita akan menambahkan item baru ke kedua Aplikasi ‘To Do Apps’ kita.

Bagaimana cara membuat Item Aktivitas baru?

React:

createNewToDoItem = () => { 
    this .setState (({list, todo}) => ({ 
      list: [ 
          ... list, 
        { 
          todo 
        } 
      ], 
      todo: '' 
    }) 
  ); 
};

Bagaimana React melakukan penambahan?

Di React, field input kita memiliki atribut yang bernama value. Value ini akan secara otomatis diperbarui melalui penggunaan beberapa fungsi yang menyatu untuk membuat sesuatu, terasa mirip dengan bagaimana Vue menangani two ways data binding (jika Anda belum pernah mendengar ini sebelumnya, ada penjelasan yang lebih terperinci dalam sesi‘ Bagaimana Vue melakukan itu’, sesi setelah ini). Kita membuatnya dengan memiliki tambahan onChange event listener yang dilampirkan pada field input . Mari kita lihat dalam field input, agar dapat mengetahui apa yang terjadi:

<input type = "text" 
       value = { this .state.todo} 
       onChange = { this .handleInput} />

Fungsi handleInput dijalankan setiap kali value dalam field input berubah (onChange). Hal tersebut akan memperbarui value todo yang berada di dalam objek state dengan mengatur apa pun yang ada di field input. Fungsinya terlihat seperti ini:

handleInput = e => { 
  this .setState ({ 
    todo: e.target.value 
  }); 
};

Sekarang, setiap kali pengguna menekan tombol + pada halaman untuk menambahkan item baru, fungsi createNewToDoItem pada dasarnya menjalankan this.setState dan memberikannya fungsi. Fungsi ini mengambil dua parameter, yang pertama adalah seluruh daftar array dari objek state, yang kedua adalah todo (yang diperbarui oleh fungsi handleInput ). Fungsi kemudian mengembalikan objek baru, yang berisi seluruh daftar dari sebelumnya dan kemudian menambahkan todo di akhir tersebut. Seluruh daftar ditambahkan melalui penggunaan operator spread (Google jika Anda belum pernah melihat operator spread sebelumnya — itu sintaks ES6).

Setelah itu, kita menetapkan todo ke string kosong, yang secara otomatis memperbarui value di dalam field input .

Vue:

createNewToDoItem () { 
    this .list.push ( 
        { 
            'todo': this .todo 
        } 
    ); 
    this .todo = ''; 
}

Bagaimana Vue melakukan penambahan?

Di Vue, field input kita di handle oleh sesuatu yang disebut v-model . Ini memungkinkan kita melakukan sesuatu yang dikenal sebagai to way data binding. Mari kita lihat field input tersebut, lalu kita akan menjelaskan apa yang terjadi:

<input type = "text" v-model = "todo" />

V-Model mengikat input dari field tersebut kepada key yang kita miliki di objek data, yaitu toDoItem. Ketika halaman dimuat, toDoitem kita atur dengan string kosong, seperti: todo: ‘’ . Jika kita memiliki beberapa data di sana, seperti todo: ‘tambahkan beberapa teks di sini’ , field input pun langsung memuat ‘tambahkan beberapa teks di sini’ di dalam field. Teks apa pun yang kita ketik di dalam field input tersebut akan terikat dengan nilai todo . Ini secara efektif mengikat dua arah (field input dapat memperbarui objek data dan objek data dapat memperbarui field input).

Jadi, jika kita lihat kembali pada blok kode createNewToDoItem () , kita melihat bahwa kita push konten todo ke dalam array list dan kemudian memperbarui todo ke string kosong.

Bagaimana cara kita menghapus dari daftar?

React:

deleteItem = indexToDelete => { 
    this .setState (({list}) => ({ 
      list: list.filter ((toDo, index) => index! == indexToDelete) 
    })); 
};

Bagaimana React melakukan delete?

Karena fungsi deleteItem terletak di dalam ToDo.js , kita dengan mudah dapat membuat referensi di dalam ToDoItem.js terlebih dahulu, meneruskan fungsi deleteItem () sebagai props pada <ToDoItem /> sebagai berikut:

<ToDoItem deleteItem = {this.deleteItem.bind (this, key)} />

Pertama kali kita melempar fungsi tersebut ke bawah untuk membuatnya dapat diakses oleh child. Anda akan melihat di sini bahwa kita juga binding this serta meneruskan parameter key, karena key adalah fungsi yang akan digunakan untuk dapat membedakan antara yang ingin dihapus saat ToDoItem diklik. Kemudian, di dalam komponen ToDoItem , kita melakukan hal berikut:

<div className = "ToDoItem-Delete" onClick = {this.props.deleteItem}> - </div>

Untuk mereferensi fungsi yang berada di dalam komponen parent, dengan this.props.deleteItem .

Vue:

onDeleteItem (todo) { 
  this .list = this .list.filter (item => item! == todo); 
}

Bagaimana Vue melakukan delete?

Diperlukan pendekatan yang sedikit berbeda di Vue. Pada dasarnya kita harus melakukan tiga hal di sini:

Pertama, pada elemen yang fungsinya ingin kita panggil:

<div class = ”ToDoItem-Delete” @ click = ”deleteItem (todo)”> - </div>

Maka kita harus membuat fungsi emit sebagai metode di dalam komponen child(dalam hal ini, ToDoItem.vue ), yang terlihat seperti ini:

deleteItem (todo) { 
    this . $ emit ('delete', todo) 
}

Anda akan melihat bahwa kita sebenarnya merujuk kepada fungsi tersebut ketika kita menambahkan ToDoItem.vue di dalam ToDo.vue :

<ToDoItem v-for = "todo in list" 
          : todo = "todo" 
          @ delete = "onDeleteItem" // <- this :) 
          : key = "todo.id" />

Inilah yang dikenal sebagai custom event-listener. Hal tersebut akan mendengarkan setiap kesempatan saat emit ditrigger dengan string ‘delete’. Jika telah mendengar, ia memicu fungsi onDeleteItem . Fungsi ini berada di dalam ToDo.vue, bukan ToDoItem.vue . Fungsi ini, seperti yang tercantum sebelumnya, cukup memfilter todo array di dalam objek data untuk menghapus item yang diklik.

Dapat diperhatikan disini bahwa dalam contoh Vue, kita bisa saja hanya menulis $ emit pada bagian dalam dari @click listener, seperti:

<div class = ”ToDoItem-Delete” @click = ”$ emit ('delete', todo)”> - </div>

Ini akan mengurangi jumlah langkah dari 3 menjadi 2, tapi ini hanya preferensi pribadi.

Singkatnya, komponen child dalam React akan memiliki akses ke fungsi parent melalui this.props (asalkan anda menurunkan props, yang merupakan praktik yang cukup standar dan Anda akan menemukan ini berkali-kali dalam contoh React lainnya), sementara di Vue, Anda harus emit event dari child yang biasanya akan dikumpulkan di dalam komponen parent.

Bagaimana kita melempar event listeners?

React:

Event listeners untuk hal-hal sederhana seperti event klik sangatlah mudah. Berikut adalah contoh cara kita membuat event klik untuk tombol yang menciptakan item ToDo baru:

<button className = ”ToDo-Add” onClick = {this.createNewToDoItem}> + </div>.

Mudah dan mirip saat kita menangani on-line in-klik dengan vanilla JS. Seperti yang telah disebutkan di bagian Vue, butuh sedikit lebih lama untuk mengatur event listener dalam menangani setiap kali tombol enter ditekan. Pada dasarnya kita membutuhkan event onKeyPress untuk ditangani oleh tag input, seperti:

<input type = ”text” onKeyPress = {this.handleKeyPress} />.

Fungsi ini akan memicu fungsi createNewToDoItem setiap kali dia mengenali bahwa tombol ‘enter’ telah ditekan, seperti:

handleKeyPress = (e) => { if (e.key === 'Enter') { this.createNewToDoItem (); } };

Vue:

Dalam Vue sangatlah straight forward. Kita cukup menggunakan simbol @ , dan kemudian jenis event-listener yang ingin kita lakukan. Misalnya, untuk menambahkan event listener klik, kita dapat menulis dengan cara berikut:

<button class = ”ToDo-Add” @ click = ”createNewToDoItem ()”> + </div>

Catatan: @click sebenarnya adalah singkatan untuk menulis v-on: klik . Hal yang paling keren dengan event listener Vue adalah ada banyak hal yang dapat Anda ikat pada mereka, seperti .once yang mencegah event listener tidak terpicu lebih dari satu kali. Ada banyak juga cara pintas ketika menulis event listener tertentu dalam menangani key stroke. Saya menemukan bahwa butuh waktu sedikit lebih lama dalam membuat event listener di React ketika menciptakan item ToDo baru setiap kali tombol enter ditekan. Di Vue, saya cukup menulis:

<input type = ”text” v-on: keyup.enter = ”createNewToDoItem” />

Bagaimana kita meneruskan data ke komponen anak?

React:

Didalam React, kita dapat meneruskan props ke dalam komponen anak dimana ia dibuat. Seperti:

<ToDoItem key= {key} item = {todo} />

Disini kita melihat dua props yang diteruskan ke komponen ToDoItem . Karena hal tersebut, sekarang kita dapat merujuk mereka di dalam komponen anak, melalui this.props. Jadi, untuk mengakses prop item.todo , kita cukup memanggil this.props.item .

Vue:

Dalam Vue, kita meneruskan props ke komponen anak pada titik dimana ia dibuat. Seperti:

<ToDoItem v-for = "todo in list" 
            : todo = "todo" 
            : key = "todo.id" 
            @ delete = "onDeleteItem" />

Setelah selesai, kita melemparnya ke props array yang ada di komponen anak, seperti : props: [‘todo’] . Dan kemudian dapat dirujuk di dalam komponen anak dengan nama mereka — dalam kasus ini, ‘todo ‘.

Bagaimana cara kita mengembalikan data ke komponen induk?

React:

Pertama tama, kita teruskan fungsi ke komponen anak dengan merujuknya sebagai prop di tempat dimana kita memanggil komponen anak tersebut. Dan kemudian kitapun menambahkan panggilan ke dalam fungsi tersebut pada anak dengan cara apa saja, seperti onClick , merujuk this.props.wh whateverTheFunctionIsCalled . Ini akan memicu fungsi yang berada di komponen induk. Kita dapat melihat contoh seluruh proses ini di bagian ‘Bagaimana cara kita menghapus dari daftar’.

Vue:

Dalam komponen anak, kita cukup menulis fungsi yang memancarkan nilai kembali ke fungsi induk. Dalam komponen induk, kita menulis fungsi yang mendengarkan ketika nilai itu dipancarkan, yang kemudian dapat memicu panggilan kepada fungsi tersebut. Kita dapat melihat contoh seluruh proses ini di bagian ‘Bagaimana cara kita menghapus dari daftar’.

Dan akhirnya! 🎉

Kita telah melihat cara menambahkan, menghapus, dan mengubah data, melempar data dengan props dari parent ke child, dan mengirim data dari child ke parent dalam bentuk event listeners. Tentu saja banyak perbedaan kecil dan kebiasaan antara React dan Vue, tetapi mudah-mudahan isi artikel ini telah membantu sedikit untuk memahami dasar bagaimana kedua framework ini menangani hal-hal tersebut🤓