अरे! मैं अलीबाबा ट्रेवल्स में एक फ्रंट एंड इंजीनियर होसैन मौसवी हूं , और इस माध्यम की कहानी में, हम एक वू घटक को चरण दर चरण रिफ्लेक्टर करेंगे और इसे बढ़ाएंगे। तो क्या हम शुरू करें ?!

स्क्रिप्ट सेटअप क्या है?

<script setup>सिंगल-फाइल कंपोनेंट्स ( SFCs ) के अंदर कंपोजिशन एपीआई का उपयोग करने के लिए एक कंपाइल-टाइम सिंटैक्टिक शुगर है । यह एसएफसी और कंपोजिशन एपीआई दोनों का उपयोग करने के लिए अनुशंसित सिंटैक्स है। आपको केवल एक विशेषता के रूप में जोड़ना है । भ्रामकता को रोकने के लिए, यह केवल SFC घटकों के लिए उपलब्ध है, और आप इसका उपयोग बाहरी .js या .ts फ़ाइलों के लिए विशेषता के साथ नहीं कर सकते। यह एक कम कोड आधार और बेहतर रनटाइम प्रदर्शन प्रदान करता है। हम इसके लाभों पर एक सेकंड में चर्चा करेंगे लेकिन पहले, आइए इसके कार्यान्वयन में गोता लगाएँ। हम विकल्प एपीआई के साथ एक साधारण घटक लेते हैं और फिर इसे रचना एपीआई के साथ एक सेटअप स्क्रिप्ट घटक में रिफलेक्टर करते हैंsetupscriptsrc. चलो व्यापार के लिए नीचे उतरो!

कार्यान्वयन

पहले, आइए विकल्प API के साथ एक मानक Vue घटक पर एक नज़र डालें। आप इस प्रकार के घटकों को Vue 2 अनुप्रयोगों में आसानी से पा सकते हैं।

<template>
  <input v-model="name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1> {{ computedVariable }} </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "Hossein",
      age: 26,
    };
  },

  computed: {
    computedVariable() {
      return `My name is ${this.name} and I'm ${this.age} years old`;
    },
  },

  methods: {
    incrementAge() {
      this.age += 1;
    },
  },
};
</script>

यह दो-तरफ़ा डेटा बाइंडिंग अवधारणाओं पर ध्यान देने वाला एक सरल घटक है और हम इस घटक को कई चरणों में रिफ्लेक्टर करना चाहते हैं।

रिफैक्टर चरण 1: संरचना एपीआई का उपयोग करना

रचना एपीआई का उपयोग करने के लिए, हमें एक विशेष हुक का उपयोग करने की आवश्यकता है: सेटअप फ़ंक्शन । लेकिन हमारे कंपोनेंट को ठीक से काम करने के लिए हमें कुछ चीजों को संभालने की जरूरत है।

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const user = reactive({ name: "Hossein", age: 26 });

    function incrementAge() {
      user.age++;
    }

    const computedVariable = computed(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
};
</script>

• हमने आयात किया है computedऔर reactivevue. मैं Vue 3 रिएक्टिविटी को गहराई से कवर करने के लिए एक और मीडियम स्टोरी लिख रहा हूं।
• जैसा कि आप देख सकते हैं, हमारे पास एक ऐसा setupफ़ंक्शन है जिसमें हमारे सभी चर और फ़ंक्शन संग्रहीत किए गए हैं। यदि आप अपने टेम्प्लेट के अंदर अपने वेरिएबल्स या फ़ंक्शंस का उपयोग करना चाहते हैं, तो आपको उन्हें फ़ंक्शन के अंत में वापस करके उन्हें एक्सपोज़ करना होगा।
• जैसा computedVariableकि आप देख सकते हैं कि Vue की गणना एक तीर फ़ंक्शन के रूप में उपयोग कर रहा है।
• कारण सभी reactiveऔर computedचर उपयोग कर रहे हैं constऔर नहीं letयह है कि उनके अंदर गेटर और सेटर है और वे अपने संदर्भ में डेटा बदलने के लिए जावास्क्रिप्ट की प्रॉक्सी का उपयोग कर रहे हैं। इसलिए हमें उन्हें फिर से चालू करने की आवश्यकता नहीं है।

रिफैक्टर चरण 2: परिभाषित कॉम्पोनेंट का उपयोग करना

मैं व्यक्तिगत रूप से मानता हूं कि आपको अपनी सभी परियोजनाओं के लिए हमेशा टाइपस्क्रिप्ट का उपयोग करना चाहिए, खासकर यदि आप परियोजना के एकमात्र अनुरक्षक/डेवलपर नहीं हैं। टाइपस्क्रिप्ट का उपयोग करके, आपका कोड मशीनों और मनुष्यों दोनों के लिए अनुमानित हो जाएगा और मैं अपने प्रोजेक्ट में अनुमानित कोड लिखने के अभ्यास का दृढ़ता से पालन करता हूं। डिफाइनकंपोनेंट टाइप इंट्रेंस के साथ एक वीयू घटक को परिभाषित करने के लिए एक प्रकार का सहायक है। चलो पता करते हैं:

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script lang="ts">
import { 
   defineComponent,
   computed,
   reactive,
   type Computed,
   type Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

interface ComponentOutput {
  computedVariable: Computed<string>;
  incrementAge: () => void;
  user: Reactive<User>;
}

export default defineComponent({
  setup(): ComponentOutput {
    const user = reactive<User>({ name: "Hossein", age: 26 });

    function incrementAge(): void {
      user.age++;
    }

    const computedVariable = computed<string>(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
});
</script>

• सबसे पहले, हमें स्पष्ट रूप से यह घोषित करने की आवश्यकता है कि जिस भाषा का हम उपयोग करना चाहते हैं वह टाइपस्क्रिप्ट है जिसे एक विशेषता कहा जाता है langऔर tsइसके मूल्य के रूप में सेट किया जाता है।
• फिर जैसा कि आप देखते हैं, यह defineComponentएक ऐसा फ़ंक्शन है जो सेटअप फ़ंक्शन को तर्क के रूप में लेता है। अगर हमारे कंपोनेंट को प्रॉप्स, एमिट या कुछ अन्य विकल्पों की जरूरत है, तो हम उन्हें तर्क के रूप में भी पास कर सकते हैं। हम बाद में एक अधिक जटिल घटक पर नज़र डालेंगे।
• हमने उपयोगकर्ता और घटक के परिणाम के लिए दो इंटरफेस बनाए हैं। हालाँकि सेटअप फंक्शन के लिए रिटर्न टाइप लिखना इतना सामान्य नहीं है, मैंने इसे शैक्षिक उद्देश्यों के लिए लिखा है ।
• हमने दो प्रकार से आयात किया है vue। दोनों एक बड़े अक्षर से शुरू होते हैं: Computedऔर Reactive। जैसा कि आप देख सकते हैं इन दो प्रकारों में एक सामान्य है। हमें उनके सामान्य प्रकार को स्पष्ट रूप से घोषित करने की आवश्यकता है।

रिफैक्टर चरण 3: स्क्रिप्ट सेटअप का उपयोग करना

अब हमारे लिए setupस्क्रिप्ट का उपयोग करने का समय आ गया है। आइए पहले नीचे दिए गए कोड को देखें और फिर हम इसका विश्लेषण करेंगे।

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()">Increment Age</button>
  <h1>{{ computedVariable }}</h1>
</template>

<script setup lang="ts">
import { computed, reactive, Computed, Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

const user = reactive<User>({ name: "Hossein", age: 26 });

function incrementAge(): void {
  user.age++;
}

const computedVariable = computed<string>(
  () => `My name is ${user.name} and I'm ${user.age} years old`
);
</script>

• setup()एक बार जब आप इसे लिख लेते हैं, तो किसी भी विधि या defineComponentआपके कोड के अंदर उपयोग करने की आवश्यकता नहीं होती है । Vue हमारे लिए उन दोनों को हैंडल करता है।
• कृपया ध्यान दें कि आप अपने टेम्पलेट के अंदर जिन मूल्यों या कार्यों का उपयोग करना चाहते हैं उन्हें वापस करने की कोई आवश्यकता नहीं है। आपके टेम्पलेट के अंदर उपयोग किए जा रहे प्रत्येक फ़ंक्शन और वेरिएबल स्वचालित रूप से आपके स्क्रिप्ट अनुभाग से वापस आ जाएंगे।

मैं नियमित रूप से स्क्रिप्ट सेटअप का अत्यधिक उपयोग कर रहा हूं। मैंने इसे बेहद उपयोगी और पढ़ने में आसान पाया है और यह बहुत अधिक दुबला कोड की ओर ले जाता है।

अपने दोस्तों के साथ साझा करें! ताली ज्यादा से ज्यादा 50 बार बजाएं।

कृपया अपने विचारों और विचारों को मेरे साथ साझा करने में संकोच न करें। आप मुझ तक ट्विटर पर पहुंच सकते हैं या मेरे पोर्टफोलियो पर जाकर कोई दूसरा रास्ता खोज सकते हैं ।

मुझसे और पढ़ें: