Vue.js

Appearance

On this page

સિંગલ-ફાઇલ કમ્પોનન્ટ્સ (Single-File Components) ​

પ્રસ્તાવના (Introduction) ​

Vue સિંગલ-ફાઇલ કમ્પોનન્ટ્સ (જેને *.vue ફાઇલો તરીકે પણ ઓળખવામાં આવે છે, જેનું ટૂંકું નામ SFC છે) એક વિશિષ્ટ ફાઇલ ફોર્મેટ છે જે આપણને સિંગલ ફાઇલમાં Vue ઘટકના ટેમ્પલેટ, લોજિક અને સ્ટાઇલિંગને એન્કેપ્સ્યુલેટ (encapsulate) કરવાની મંજૂરી આપે છે. અહીં એક ઉદાહરણ SFC છે:

vue
<script>
export default {
  data() {
    return {
      greeting: 'હેલો વર્લ્ડ!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
vue
<script setup>
import { ref } from 'vue'
const greeting = ref('હેલો વર્લ્ડ!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

જેમ આપણે જોઈ શકીએ છીએ, Vue SFC એ HTML, CSS અને JavaScript ના ક્લાસિક ત્રણેયનું કુદરતી વિસ્તરણ છે. <template>, <script>, અને <style> બ્લોક્સ એ જ ફાઇલમાં ઘટકના વ્યુ (view), લોજિક અને સ્ટાઇલિંગને એન્કેપ્સ્યુલેટ અને કોલોકેટ (colocate) કરે છે. સંપૂર્ણ સિન્ટેક્સ SFC સિન્ટેક્સ સ્પષ્ટીકરણ (Syntax Specification) માં વ્યાખ્યાયિત કરેલ છે.

એસ.એફ.સી. શા માટે? (Why SFC) ​

જ્યારે એસ.એફ.સી. (SFCs) ને બિલ્ડ સ્ટેપની જરૂર હોય છે, ત્યારે બદલામાં અસંખ્ય ફાયદાઓ છે:

SFC એ ફ્રેમવર્ક તરીકે Vue ની એક વ્યાખ્યાયિત સુવિધા છે અને નીચેના સંજોગોમાં Vue નો ઉપયોગ કરવા માટે ભલામણ કરેલ અભિગમ છે:

  • સિંગલ-પેજ એપ્લિકેશન્સ (SPA)
  • સ્ટેટિક સાઇટ જનરેશન (SSG)
  • કોઈપણ બિન-તુચ્છ ફ્રન્ટએન્ડ જ્યાં વધુ સારા ડેવલપમેન્ટ અનુભવ (DX) માટે બિલ્ડ સ્ટેપને ન્યાયી ઠેરવી શકાય છે.

તેમ છતાં, અમે સમજીએ છીએ કે એવા સંજોગો છે જ્યાં SFCs અતિશય (overkill) લાગે છે. આ જ કારણ છે કે બિલ્ડ સ્ટેપ વિના પ્લેન JavaScript દ્વારા હજુ પણ Vue નો ઉપયોગ કરી શકાય છે. જો તમે હળવા ક્રિયાપ્રતિક્રિયાઓ (light interactions) સાથે મોટાભાગે સ્ટેટિક HTML ને વધારવા માંગતા હો, તો તમે petite-vue પણ તપાસી શકો છો, જે પ્રોગ્રેસિવ એન્હાન્સમેન્ટ (progressive enhancement) માટે ઓપ્ટિમાઇઝ કરેલ Vue નો ૬ kB સબસેટ છે.

તે કેવી રીતે કામ કરે છે (How It Works) ​

Vue SFC એ ફ્રેમવર્ક-વિશિષ્ટ ફાઇલ ફોર્મેટ છે અને તેને @vue/compiler-sfc દ્વારા સ્ટાન્ડર્ડ JavaScript અને CSS માં પ્રી-કમ્પાઇલ કરવું આવશ્યક છે. કમ્પાઇલ કરેલ SFC એ સ્ટાન્ડર્ડ JavaScript (ES) મોડ્યુલ છે - જેનો અર્થ છે કે પ્રોપર બિલ્ડ સેટઅપ સાથે તમે મોડ્યુલની જેમ SFC ને ઇમ્પોર્ટ કરી શકો છો:

js
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

SFC ની અંદર <style> ટૅગ્સ સામાન્ય રીતે હોટ અપડેટ્સને સપોર્ટ કરવા માટે ડેવલપમેન્ટ દરમિયાન નેટિવ <style> ટૅગ્સ તરીકે ઇન્જેક્ટ કરવામાં આવે છે. પ્રોડક્શન માટે તેને એક્સટ્રેક્ટ કરી શકાય છે અને સિંગલ CSS ફાઇલમાં મર્જ કરી શકાય છે.

તમે SFC સાથે રમી શકો છો અને તે કેવી રીતે કમ્પાઇલ કરવામાં આવે છે તે Vue SFC Playground માં અન્વેષણ કરી શકો છો.

વાસ્તવિક પ્રોજેક્ટ્સમાં, અમે સામાન્ય રીતે SFC કમ્પાઇલરને Vite અથવા Vue CLI (જે webpack પર આધારિત છે) જેવા બિલ્ડ ટૂલ સાથે સંકલિત કરીએ છીએ અને Vue તમને શક્ય તેટલી ઝડપથી SFCs સાથે પ્રારંભ કરવા માટે સત્તાવાર સ્કેફોલ્ડિંગ ટૂલ્સ (scaffolding tools) પ્રદાન કરે છે. SFC ટૂલિંગ (SFC Tooling) વિભાગમાં વધુ વિગતો તપાસો.

સેપરેશન ઓફ કન્સર્ન (Separation of Concerns) વિશે શું? ​

પરંપરાગત વેબ ડેવલપમેન્ટ પૃષ્ઠભૂમિમાંથી આવતા કેટલાક વપરાશકર્તાઓને ચિંતા હોઈ શકે છે કે SFCs સમાન સ્થાને વિવિધ ચિંતાઓનું મિશ્રણ કરી રહ્યાં છે - જેને HTML/CSS/JS અલગ રાખવાનું માનવામાં આવતું હતું!

આ પ્રશ્નનો જવાબ આપવા માટે, આપણા માટે એ સંમત થવું મહત્વપૂર્ણ છે કે સેપરેશન ઓફ કન્સર્ન એ ફાઇલ પ્રકારોના વિભાજન સમાન નથી. એન્જિનિયરિંગ સિદ્ધાંતોનો અંતિમ ધ્યેય કોડબેઝની જાળવણીક્ષમતા (maintainability) માં સુધારો કરવાનો છે. સેપરેશન ઓફ કન્સર્ન, જ્યારે ફાઇલ પ્રકારોના વિભાજન તરીકે કટ્ટરપંથી રીતે લાગુ કરવામાં આવે છે, ત્યારે તે વધુને વધુ જટિલ ફ્રન્ટએન્ડ એપ્લિકેશન્સના સંદર્ભમાં તે લક્ષ્ય સુધી પહોંચવામાં અમને મદદ કરતું નથી.

આધુનિક UI ડેવલપમેન્ટમાં, અમે માલૂમ કર્યું છે કે કોડબેઝને ત્રણ વિશાળ સ્તરોમાં વિભાજીત કરવાને બદલે જે એકબીજા સાથે જોડાયેલા હોય છે, તેમને સીમીત-જોડાયેલા (loosely-coupled) ઘટકોમાં વિભાજીત કરીને તેમને કમ્પોઝ કરવા માટે વધુ અર્થપૂર્ણ બને છે. કમ્પોનન્ટની અંદર, તેનું ટેમ્પલેટ, લોજિક અને સ્ટાઇલ સ્વાભાવિક રીતે જોડાયેલા હોય છે અને તેમને કોલોકેટ કરવાથી ખરેખર ઘટક વધુ સુસંગત અને જાળવવા યોગ્ય બને છે.

નોંધ લો કે જો તમને સિંગલ-ફાઇલ કમ્પોનન્ટ્સનો વિચાર ગમતો ન હોય તો પણ, તમે સોર્સ ઇમ્પોર્ટ્સ (Src Imports) નો ઉપયોગ કરીને તમારી JavaScript અને CSS ને અલગ ફાઇલોમાં વિભાજીત કરીને તેની હોટ-રીલોડિંગ અને પ્રી-કમ્પાઇલેશન સુવિધાઓનો લાભ મેળવી શકો છો.

Edit this page on GitHub