Vue 3.0 - premier regard

J'ai enfin essayé la nouvelle version de Vue. Je ne vais pas être objectif dans cet article, je vais simplement vous dire mes impressions tout en travaillant avec la nouvelle version, et également vous dire comment l'installer et commencer maintenant.

Malgré la sortie, Vue 3.0 n'est pas encore prêt pour une utilisation complète en production. Router et Vuex ne sont pas encore prêts à travailler avec la nouvelle version, la CLI Vue installe l'ancienne version par défaut, sans oublier les plugins et bibliothèques tiers dont les auteurs n'ont pas eu le temps de les mettre à jour. Il s'agit de la version incomplète et attendue depuis longtemps que nous avons reçue.

En particulier, beaucoup de questions sont soulevées par la nouvelle syntaxe, la soi-disant API de composition , qui, heureusement, ne remplacera pas l'API Options complètement familière et bien-aimée. En faveur de la nouvelle composition, on nous propose une image similaire partout:

. , , - . , , TS . - , . . .

" " : React. , , , .

.

Vue 3, :

npm install vue@next

npm install -g @vue/cli

yarn global add @vue/cli

vue -V

vue create hello-vue

cd hello-vue

code  .

Vue CLi . . main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp, . . , , , - , . , .

HelloWorld.vue App.vue.

components Card.vue :

<template>
  <div>
    <img :src="imgUrl" alt="cat pic" />
    <h1>{{ catName }}</h1>
    <p>
      <i>{{ text }}</i>
    </p>
    <p>
      <b>{{ website }}</b>
    </p>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    id: String,
    name: String,
    text: String,
    website: String,
  },
  computed: {
    imgUrl() {
      return `https://robohash.org/${this.id}?set=set4&size=180x180`;
    },
    catName() {
      return this.name.replace(/[_.-]/gi, " ");
    },
  },
};
</script>

props. , . , , . computed. ? computed

<script>
import { computed } from "vue";
...

computed setup :

 setup(props) {
    const imgUrl = computed(
      () => `https://robohash.org/${props.id}?set=set4&size=180x180`
    );
    const catName = computed(() => props.name.replace(/[_.-]/g, " "));
    return {
      imgUrl,
      catName,
    };
  },

Setup props, .

, , robohash.org. . :

<style scoped>
div {
  width: 400px;
  height: 380px;
  position: relative;
  background: #ecf0f3;
  margin-bottom: 30px;
  padding: 30px 5px;
  border-radius: 32px;
  text-align: center;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: semibold;
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
    6px 6px 10px rgba(0, 0, 0, 0.2);
  color: #6f6cde;
}
</style>

App.vue. . :

<template>
  <div class="container">
    <Card
      v-for="cat in cats"
      :id="cat.id"
      :name="cat.username"
      :text="cat.company.catchPhrase"
      :key="cat.id"
      :website="cat.website"
    />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Card from "./components/Card";

export default {
  name: "App",
  components: { Card },
  setup() {
    const cats = ref([]);
    const fetchCats = async () => {
      cats.value = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      ).then((response) => response.json());
    };
    onMounted(fetchCats);
    return {
      cats,
    };
  },
};
</script>

<style>
body {
  background: #ecf0f3;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  padding: 30px 0px;
}
</style>

, :

ref onMounted

ref , setup(). -. ref . , , , . value , , :

cats.value = data

cats

onMounted mounted. setup , on. onMounted . , , .

, .

.

. ( ) . , . .