Vue 3.0 - النظرة الأولى

أخيرًا ، حاولنا تجربة الإصدار الجديد من Vue. لن أكون موضوعيًا في هذه المقالة ، سأخبرك فقط بانطباعاتي أثناء العمل مع الإصدار الجديد ، وأخبرك أيضًا بكيفية تثبيته والبدء الآن.

على الرغم من الإصدار ، فإن Vue 3.0 ليس جاهزًا بعد للاستخدام الكامل للإنتاج. جهاز التوجيه و Vuex غير جاهزين بعد للعمل مع الإصدار الجديد ، يقوم Vue CLI بتثبيت الإصدار القديم افتراضيًا ، ناهيك عن المكونات الإضافية والمكتبات التابعة لجهات خارجية التي لم يتح لمؤلفيها الوقت لتحديثها. هذا هو الإصدار الذي طال انتظاره وغير المكتمل الذي تلقيناه.

يتم طرح الكثير من الأسئلة بشكل خاص من خلال البنية الجديدة ، ما يسمى بواجهة برمجة التطبيقات Composition API ، والتي ، لحسن الحظ ، لن تحل محل واجهة API للخيارات المألوفة والمحبوبة تمامًا. لصالح التكوين الجديد ، نقدم لنا صورة مماثلة في كل مكان:

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

, .

.

. ( ) . , . .