Sytuacja kobiet w IT w 2024 roku
11.06.20195 min
Connor Finnegan

Connor FinneganFull Stack Web Developer

Co musisz wiedzieć o Vue.js po pracy z Reactem

Wszystko, co musisz wiedzieć o pracy z Vue.js po używaniu Reacta, czyli zbiór podobieństw i różnic.

Co musisz wiedzieć o Vue.js po pracy z Reactem

Podczas mojego pobytu w Flatiron School większość czasu poświęconego na naukę front-endu spędziłem pracując z podstawowym JavaScriptem, Reactem i Reduxem. Ostatnio jednak zacząłem pracować nad projektem, który korzysta z Vue.js i musiałem zapoznać się z tym popularnym JavaScriptowym frameworkiem.

Podczas mojej nauki pomyślałem, że dobrym pomysłem będzie postawienie Vue i React obok siebie i przeanalizowanie ważnych różnic i podobieństw. W tym artykule przedstawię kilka kluczowych punktów przy porównywaniu Vue i Reacta, z naciskiem na to, co chciałby wiedzieć ktoś, kto przechodzi do Vue po raz pierwszy po pracy w React.

Podobieństwa

React i Vue wykorzystują wirtualny DOM do tworzenia komponentów reaktywnych, co oznacza, że komponenty zmieniają się automatycznie na stronie, gdy dane są zmieniane. Oba mają na celu umożliwienie rozwoju opartego na komponentach, co poprawia skalowalność poprzez rozbicie aplikacji na porcje kodu, które łatwo można ponownie wykorzystać w miarę rozwoju aplikacji.

Zarówno Vue, jak i React, są to narzędzia lekkie i szybkie oraz udostępniają metody cyklu życia komponentów, aby dać programistom kontrolę nad tym, kiedy i jak powinny renderować się różne elementy strony. Mają sporo wspólnego i oba mogą być świetnym wyborem dla Ciebie, w zależności od celu, co budujesz i co chcesz osiągnąć.

Różnice

Podstawy

Mimo że teraz czuję się znacznie swobodniej z Reactem, widzę, że ma bardziej stromą krzywą uczenia się. Poniżej rozwinę kilka powodów, dlaczego tak jest i dlaczego zaczęło to mieć sens dopiero po kilku tygodniach intensywnej nauki. Jest to coś do rozważenia dla programistów, którzy nie mieli wcześniej kontaktu z Reactem lub Vue.

Jedną z kluczowych różnic jest to, że React używa wyłącznie JavaScriptu, podczas gdy Vue używa struktury HTML / CSS / JavaScript, która prawdopodobnie byłaby bardziej znana programistom standardowego JavaScriptu. Aby kontrolować interfejs użytkownika aplikacji, deweloperzy Reacta używają JSX, rozszerzenia JavaScript, które tworzy elementy React i wygląda jak połączenie między HTML i JavaScriptem.

Przyjrzyjmy się komponentowi React i komponentowi Vue obok siebie, aby zobaczyć różnicę:

„Hello, world!” w Vue, z Vue docs

W tym przykładzie Vue sam komponent jest renderowany w standardowym HTML w formie div. Następnie, w poniższym JavaScripcie, nowa instancja Vue targetuje element o identyfikatorze #app, używając linii el: '#app' („el” oznacza element), a następnie pojawiają się dowolne dane potrzebne komponentowi. Wiadomość jest następnie renderowana w div za pomocą linii {{message}}. Dowolne dane zapisane pod kluczem message zostaną wyświetlone. Jeśli miałbyś otworzyć konsolę tego komponentu i napisać app.data = „Howdy”, wiadomość na ekranie ulegnie zmianie.

„Hello” w React, z React docs

W React komponent funkcjonalny zwraca element z danymi, które otrzymał jako propsy wplatane za pomocą JSX (props.name). Ten przykład pokazuje również, w jaki sposób element na stronie jest połączony z Reactem.

Manipulowanie danymi

Manipulowanie danymi, które zapisałeś w Vue, jest dość proste, ponieważ wszelkie zmiany automatycznie aktualizują dane na stronie i w pamięci poprzez reaktywny system wiązania Vue. Aby podać przykład, powiedzmy, że mamy przycisk, który dodaje coś do koszyka. W pliku HTML napisalibyśmy coś takiego:

W pliku index.html

I w naszej instancji Vue śledzilibyśmy te dane i metodę w następujący sposób:

W pliku main.js

{{ count }} wyświetla liczbę elementów przechowywanych w naszych danych, a v-on: click wiąże przycisk z naszym addToCar i wie, jak go wykonać za każdym razem, gdy użytkownik kliknie przycisk. Aktualizowanie danych jest tak proste, jak odwoływanie się do this.count w naszej instancji Vue i inkrementowanie.

W React nie jest to takie proste. Nie możesz po prostu zaktualizować danych przechowywanych w stanie, mówiąc this.count + = 1. Musisz jawnie użyć funkcji setState(), aby zaktualizować dane przechowywane w stanie. Cały komponent licznika wyglądałby mniej więcej tak:

Ogólnie, niezbyt różni się to od Vue oprócz funkcji, która obsługuje rzeczywistą inkrementację. Funkcja setState() pozwala programistom na większą kontrolę nad metodami związanymi z cyklem życia komponentów, ale może się to wydawać uciążliwe w zależności od użycia aplikacji. Ponownie wszystko sprowadza się do osobistych preferencji.

Renderowanie warunkowe

W Vue istnieje kilka opcji warunkowego renderowania. Pierwszy wygląda dość podobnie do instrukcji warunkowych w standardowym JavaScripcie - dodajesz dyrektywę v-if do jednego elementu, który będzie wyświetlał, czy warunek jest prawdziwy, i v-else do jego opcji alternatywnej. Np. jeśli miałeś sklep internetowy i chciałeś zmienić to, co jest wyświetlane na podstawie zawartości, napisałbyś coś takiego:

<h3 v-if="count > 0"> {{ count }} items left</h3>
<h3 v-else>Out of stock!</h3>


W tych przypadkach element będzie renderowany tylko, jeśli warunek zostanie spełniony. Inną opcją jest v-show. Kiedy używasz v-show, element będzie zawsze renderowany, ale ustawienie wyświetlania zostanie przełączone w CSS w zależności od tego, czy warunek jest spełniony. Na przykład, jeśli chcesz wyświetlić wiadomość tylko wtedy, gdy przedmiot jest w sprzedaży, napiszesz:

<h3 v-show="onSale">This item is on sale!</h3>


W React również istnieje kilka opcji do takich działań. Jednym z nich jest użycie prostego renderowania JS if-else, chociaż może to stworzyć dość długi kod. Krótsza wersja polega na używaniu renderowania warunkowego w linii z operatorem trójargumentowym. Rozszerzając nasz przykład powyżej, w komponencie React może to wyglądać następująco:

render() {
  return(
    <div>
      {this.state.count > 0 ? (
        <h3> {this.state.count} items left</h3>
      ) : (
        <h3>Out of stock!</h3>
      )}
    </div>
)}


Możesz również skorzystać z operatora && w podobny sposób jak w v-show. Gdy nie ma alternatywy i chcesz tylko coś do wyświetlania, gdy pewien warunek jest spełniony, jak nasz przykład ze sprzedażą z wcześniej, musisz wykonać następujące czynności:

render() {
  return(
    <div>
      {this.state.onSale && 
       <h3>This item is on sale!</h3>
      }
    </div>
)}


Mam nadzieję, że ten przegląd okaże Ci się pomocny!

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.

<p>Loading...</p>