Vue 3.0 - erster Blick

Endlich habe ich die neue Version von Vue ausprobiert. Ich werde in diesem Artikel nicht objektiv sein. Ich werde Ihnen nur meine Eindrücke während der Arbeit mit der neuen Version mitteilen und Ihnen auch erklären, wie Sie sie installieren und jetzt loslegen können.

Trotz der Veröffentlichung ist Vue 3.0 noch nicht für die vollständige Produktion bereit. Router und Vuex sind noch nicht bereit, mit der neuen Version zu arbeiten. Die Vue-CLI installiert standardmäßig die alte Version, ganz zu schweigen von Plugins und Bibliotheken von Drittanbietern, deren Autoren keine Zeit hatten, sie zu aktualisieren. Hier ist eine so lang erwartete und fehlerhafte Veröffentlichung, die wir erhalten haben.

Besonders viele Fragen werden durch die neue Syntax, die sogenannte Composition API , aufgeworfen , die zum Glück die völlig bekannte und beliebte Options-API nicht ersetzen wird. Für die neue Komposition wird uns überall ein ähnliches Bild angeboten:

. , , - . , , 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 . , , .

, .

.

. ( ) . , . .