Vue.js

Appearance

On this page

શબ્દાવલિ (Glossary) ​

આ શબ્દાવલિનો હેતુ Vue વિશે વાત કરતી વખતે સામાન્ય વપરાશમાં આવતા ટેકનિકલ શબ્દોના અર્થો વિશે માર્ગદર્શન આપવાનો છે. તેનો હેતુ શબ્દોનો સામાન્ય રીતે કેવી રીતે ઉપયોગ કરવામાં આવે છે તેનું વર્ણનાત્મક (descriptive) હોવાનો છે, તેઓનો કેવી રીતે ઉપયોગ થવો જ જોઈએ તેનું નિર્દેશાત્મક (prescriptive) સ્પષ્ટીકરણ આપવાનો નથી. આજુબાજુના સંદર્ભના આધારે કેટલાક શબ્દોના અર્થ અથવા અર્થછાયા (nuances) થોડા અલગ હોઈ શકે છે.

અસિંક કમ્પોનન્ટ (async component) ​

અસિંક કમ્પોનન્ટ (async component) એ બીજા કમ્પોનન્ટની આસપાસનું એક રેપર (wrapper) છે જે લપેટાયેલા (wrapped) કમ્પોનન્ટને લેઝી લોડ (lazy loaded) કરવાની મંજૂરી આપે છે. આનો ઉપયોગ સામાન્ય રીતે બિલ્ટ થયેલ .js ફાઇલોના કદને ઘટાડવા માટે કરવામાં આવે છે, જે તેમને નાના ટુકડાઓમાં વિભાજિત કરવાની મંજૂરી આપે છે જે ફક્ત જરૂર હોય ત્યારે જ લોડ થાય છે.

Vue Router પાસે રૂટ કમ્પોનન્ટ્સના લેઝી લોડિંગ માટે સમાન સુવિધા છે, જોકે તે Vue ના અસિંક કમ્પોનન્ટ ફીચરનો ઉપયોગ કરતી નથી.

વધુ વિગતો માટે જુઓ:

કમ્પાઇલર મેક્રો (compiler macro) ​

કમ્પાઇલર મેક્રો (compiler macro) એ વિશિષ્ટ કોડ છે જે કમ્પાઇલર દ્વારા પ્રોસેસ કરવામાં આવે છે અને બીજા કોઈમાં રૂપાંતરિત થાય છે. તેઓ અસરકારક રીતે સ્ટ્રિંગ રિપ્લેસમેન્ટનું એક સ્માર્ટ સ્વરૂપ છે.

Vue નું SFC કમ્પાઇલર વિવિધ મેક્રોસને સપોર્ટ કરે છે, જેમ કે defineProps(), defineEmits() અને defineExpose(). આ મેક્રોસ જાણી જોઈને સામાન્ય JavaScript ફંક્શન્સ જેવા લાગે તે રીતે ડિઝાઇન કરવામાં આવ્યા છે જેથી તેઓ JavaScript / TypeScript ની આસપાસના સમાન પાર્સર અને ટાઇપ ઇન્ફરન્સ ટૂલિંગનો લાભ લઈ શકે. જો કે, તેઓ વાસ્તવિક ફંક્શન્સ નથી કે જે બ્રાઉઝરમાં ચલાવવામાં આવે છે. આ વિશિષ્ટ સ્ટ્રિંગ્સ છે જે કમ્પાઇલર શોધી કાઢે છે અને તેને વાસ્તવિક JavaScript કોડ સાથે બદલી દે છે જે વાસ્તવમાં ચલાવવામાં આવશે.

મેક્રોસના ઉપયોગ પર મર્યાદાઓ હોય છે જે સામાન્ય JavaScript કોડ પર લાગુ થતી નથી. ઉદાહરણ તરીકે, તમે વિચારી શકો છો કે const dp = defineProps તમને defineProps માટે અલગ નામ (alias) બનાવવાની મંજૂરી આપશે, પરંતુ તે વાસ્તવમાં ભૂલ (error) માં પરિણમશે. defineProps() માં કઈ વેલ્યુઝ પાસ કરી શકાય છે તેના પર પણ મર્યાદાઓ છે, કારણ કે 'આર્ગ્યુમેન્ટ્સ' કમ્પાઇલર દ્વારા પ્રોસેસ કરવાની હોય છે અને રનટાઇમ પર નહીં.

વધુ વિગતો માટે જુઓ:

કમ્પોનન્ટ / ઘટક (component) ​

કમ્પોનન્ટ શબ્દ Vue માટે અનન્ય નથી. તે ઘણા UI ફ્રેમવર્ક્સમાં સામાન્ય છે. તે UI ના એક ટુકડાનું વર્ણન કરે છે, જેમ કે બટન અથવા ચેકબોક્સ. મોટા કમ્પોનન્ટ્સ બનાવવા માટે કમ્પોનન્ટ્સને પણ જોડી શકાય છે.

કમ્પોનન્ટ્સ એ UI ને નાના ટુકડાઓમાં વિભાજિત કરવા માટે Vue દ્વારા પૂરી પાડવામાં આવેલ પ્રાથમિક મિકેનિઝમ છે, જે મેન્ટેનેબિલિટી સુધારવા અને કોડ રિયુઝની મંજૂરી આપે છે.

Vue કમ્પોનન્ટ એ એક ઓબ્જેક્ટ છે. બધી પ્રોપર્ટીઝ વૈકલ્પિક છે, પરંતુ કમ્પોનન્ટ રેન્ડર કરવા માટે ટેમ્પલેટ અથવા રેન્ડર ફંક્શન આવશ્યક છે. ઉદાહરણ તરીકે, નીચેનો ઓબ્જેક્ટ એક માન્ય કમ્પોનન્ટ હશે:

js
const HelloWorldComponent = {
  render() {
    return 'Hello world!'
  }
}

વ્યવહારમાં, મોટાભાગની Vue એપ્લિકેશન્સ સિંગલ-ફાઇલ કમ્પોનન્ટ્સ (.vue ફાઇલો) નો ઉપયોગ કરીને લખવામાં આવે છે. જો કે આ કમ્પોનન્ટ્સ પ્રથમ નજરમાં ઓબ્જેક્ટ્સ દેખાતા નથી, SFC કમ્પાઇલર તેમને ઓબ્જેક્ટમાં રૂપાંતરિત કરશે, જેનો ઉપયોગ ફાઇલ માટે ડિફોલ્ટ એક્સપોર્ટ તરીકે થાય છે. બાહ્ય દ્રષ્ટિકોણથી, .vue ફાઇલ માત્ર એક ES મોડ્યુલ છે જે કમ્પોનન્ટ ઓબ્જેક્ટ એક્સપોર્ટ કરે છે.

કમ્પોનન્ટ ઓબ્જેક્ટની પ્રોપર્ટીઝને સામાન્ય રીતે ઓપ્શન્સ (options) તરીકે ઓળખવામાં આવે છે. અહીંથી જ ઓપ્શન્સ API ને તેનું નામ મળ્યું છે.

કમ્પોનન્ટ માટેના ઓપ્શન્સ વ્યાખ્યાયિત કરે છે કે તે કમ્પોનન્ટના ઇન્સ્ટન્સ (instances) કેવી રીતે બનાવવા જોઈએ. કમ્પોનન્ટ્સ વૈચારિક રીતે ક્લાસ (classes) જેવા જ હોય છે, જોકે Vue તેમને વ્યાખ્યાયિત કરવા માટે વાસ્તવિક JavaScript ક્લાસનો ઉપયોગ કરતું નથી.

કમ્પોનન્ટ શબ્દનો ઉપયોગ કમ્પોનન્ટ ઇન્સ્ટન્સના સંદર્ભમાં વધુ છૂટથી પણ કરી શકાય છે.

વધુ વિગતો માટે જુઓ:

'કમ્પોનન્ટ' શબ્દ અન્ય કેટલાક શબ્દોમાં પણ જોવા મળે છે:

કમ્પોઝેબલ (composable) ​

કમ્પોઝેબલ (composable) શબ્દ Vue માં સામાન્ય વપરાશની પેટર્નનું વર્ણન કરે છે. તે Vue નું અલગ ફીચર નથી, તે માત્ર ફ્રેમવર્કના કોમ્પોઝિશન (Composition) API ને વાપરવાની એક રીત છે.

  • કમ્પોઝેબલ એક ફંક્શન છે.
  • સ્ટેટફુલ લોજિક (stateful logic) ને એન્કેપ્સ્યુલેટ કરવા અને પુનઃઉપયોગ કરવા માટે કમ્પોઝેબલ્સનો ઉપયોગ થાય છે.
  • ફંક્શનનું નામ સામાન્ય રીતે use થી શરૂ થાય છે, જેથી અન્ય ડેવલપર્સ જાણી શકે કે તે એક કમ્પોઝેબલ છે.
  • ફંક્શન સામાન્ય રીતે ઘટકના setup() ફંક્શનના સિંક્રોનસ એક્ઝિક્યુશન દરમિયાન (અથવા, સમાન રીતે, <script setup> બ્લોકના એક્ઝિક્યુશન દરમિયાન) કોલ કરવામાં આવે તેવી અપેક્ષા રાખવામાં આવે છે. આ કમ્પોઝેબલના ઇન્વોકેશનને વર્તમાન કમ્પોનન્ટ સંદર્ભ સાથે જોડે છે, દા.ત. provide(), inject() અથવા onMounted() ના કોલ દ્વારા.
  • કમ્પોઝેબલ્સ સામાન્ય રીતે સાદો ઓબ્જેક્ટ પરત કરે છે, રિએક્ટિવ ઓબ્જેક્ટ નહીં. આ ઓબ્જેક્ટમાં સામાન્ય રીતે રેફ્સ અને ફંક્શન્સ હોય છે અને કોલિંગ કોડની અંદર ડિસ્ટ્રક્ચર થવાની અપેક્ષા રાખવામાં આવે છે.

ઘણી પેટર્ન્સની જેમ, ચોક્કસ કોડ લેબલ માટે લાયક છે કે કેમ તે અંગે કેટલીક અસંમતિ હોઈ શકે છે. તમામ JavaScript યુટિલિટી ફંક્શન્સ કમ્પોઝેબલ્સ નથી. જો કોઈ ફંક્શન કોમ્પોઝિશન API નો ઉપયોગ કરતું નથી, તો તે સંભવતઃ કમ્પોઝેબલ નથી. જો તે setup() ના સિંક્રોનસ એક્ઝિક્યુશન દરમિયાન કોલ થવાની અપેક્ષા રાખતું નથી, તો તે સંભવતઃ કમ્પોઝેબલ નથી. કમ્પોઝેબલ્સ ખાસ કરીને સ્ટેટફુલ લોજિકને એન્કેપ્સ્યુલેટ કરવા માટે વપરાય છે, તેઓ માત્ર ફંક્શન્સ માટે નામકરણ સંમેલન નથી.

કમ્પોઝેબલ્સ લખવા વિશે વધુ વિગતો માટે માર્ગદર્શિકા - કમ્પોઝેબલ્સ જુઓ.

કોમ્પોઝિશન API (Composition API) ​

કોમ્પોઝિશન (Composition) API એ Vue માં ઘટકો અને કમ્પોઝેબલ્સ લખવા માટે વપરાતા ફંક્શન્સનો સંગ્રહ છે.

આ શબ્દનો ઉપયોગ ઘટકો લખવા માટે વપરાતી બે મુખ્ય શૈલીઓમાંથી એકનું વર્ણન કરવા માટે પણ થાય છે, બીજી શૈલી ઓપ્શન્સ API છે. કોમ્પોઝિશન API નો ઉપયોગ કરીને લખાયેલા ઘટકો કાં તો <script setup> અથવા સ્પષ્ટ setup() ફંક્શનનો ઉપયોગ કરે છે.

વધુ વિગતો માટે કોમ્પોઝિશન API FAQ જુઓ.

કસ્ટમ એલિમેન્ટ / ઘટક (custom element) ​

કસ્ટમ એલિમેન્ટ (custom element) એ વેબ ઘટકો (Web Components) સ્ટાન્ડર્ડનું એક ફીચર છે, જે આધુનિક વેબ બ્રાઉઝર્સમાં અમલમાં મૂકવામાં આવ્યું છે. તે પેજ પર તે સમયે વેબ કમ્પોનન્ટનો સમાવેશ કરવા માટે તમારા HTML માર્કઅપમાં કસ્ટમ HTML એલિમેન્ટનો ઉપયોગ કરવાની ક્ષમતાનો સંદર્ભ આપે છે.

Vue પાસે કસ્ટમ એલિમેન્ટ્સ રેન્ડર કરવા માટે બિલ્ટ-ઇન સપોર્ટ છે અને તેમને સીધા Vue કમ્પોનન્ટ ટેમ્પલેટ્સમાં ઉપયોગમાં લેવાની મંજૂરી આપે છે.

કસ્ટમ એલિમેન્ટ્સને બીજા Vue કમ્પોનન્ટના ટેમ્પલેટમાં ટેગ તરીકે Vue કમ્પોનન્ટ્સનો સમાવેશ કરવાની ક્ષમતા સાથે ગૂંચવવો જોઈએ નહીં. કસ્ટમ એલિમેન્ટ્સનો ઉપયોગ વેબ કમ્પોનન્ટ્સ બનાવવા માટે થાય છે, Vue કમ્પોનન્ટ્સ બનાવવા માટે નહીં.

વધુ વિગતો માટે જુઓ:

ડાયરેક્ટિવ (directive) ​

ડાયરેક્ટિવ (directive) શબ્દ v- પ્રીફિક્સથી શરૂ થતા ટેમ્પલેટ એટ્રિબ્યુટ્સ અથવા તેમના સમકક્ષ શોર્ટકટ્સનો સંદર્ભ આપે છે.

બિલ્ટ-ઇન ડાયરેક્ટિવ્સમાં v-if, v-for, v-bind, v-on અને v-slot નો સમાવેશ થાય છે.

Vue કસ્ટમ ડાયરેક્ટિવ્સ બનાવવાનું પણ સમર્થન આપે છે, જો કે તેનો ઉપયોગ સામાન્ય રીતે સીધા DOM નોડ્સને મેનીપ્યુલેટ કરવા માટે 'એસ્કેપ હેચ (escape hatch)' તરીકે જ થાય છે. કસ્ટમ ડાયરેક્ટિવ્સ સામાન્ય રીતે બિલ્ટ-ઇન ડાયરેક્ટિવ્સની કાર્યક્ષમતાને ફરીથી બનાવવા માટે વાપરી શકાતા નથી.

વધુ વિગતો માટે જુઓ:

ડાયનેમિક કમ્પોનન્ટ (dynamic component) ​

ડાયનેમિક કમ્પોનન્ટ (dynamic component) શબ્દનો ઉપયોગ એવા કિસ્સાઓનું વર્ણન કરવા માટે થાય છે કે જેમાં કયા ચાઇલ્ડ કમ્પોનન્ટને રેન્ડર કરવો તેની પસંદગી ગતિશીલ રીતે કરવાની જરૂર છે. સામાન્ય રીતે, આ <component :is="type"> નો ઉપયોગ કરીને પ્રાપ્ત થાય છે.

ડાયનેમિક કમ્પોનન્ટ એ કમ્પોનન્ટનો કોઈ વિશિષ્ટ પ્રકાર નથી. કોઈપણ કમ્પોનન્ટનો ઉપયોગ ડાયનેમિક કમ્પોનન્ટ તરીકે થઈ શકે છે. તે કમ્પોનન્ટની પસંદગી છે જે ડાયનેમિક છે, કમ્પોનન્ટ પોતે નહીં.

વધુ વિગતો માટે જુઓ:

ઇફેક્ટ (effect) ​

જુઓ રિએક્ટિવ ઇફેક્ટ (#reactive-effect) અને સાઇડ ઇફેક્ટ (#side-effect).

ઇવેન્ટ (event) ​

પ્રોગ્રામના વિવિધ ભાગો વચ્ચે વાતચીત કરવા માટે ઇવેન્ટ્સનો ઉપયોગ પ્રોગ્રામિંગના ઘણા વિવિધ ક્ષેત્રોમાં સામાન્ય છે. Vue ની અંદર, આ શબ્દ સામાન્ય રીતે નેટિવ HTML એલિમેન્ટ ઇવેન્ટ્સ અને Vue કમ્પોનન્ટ ઇવેન્ટ્સ બંને પર લાગુ થાય છે. v-on ડાયરેક્ટિવનો ઉપયોગ ટેમ્પલેટ્સમાં બંને પ્રકારની ઇવેન્ટ સાંભળવા માટે થાય છે.

વધુ વિગતો માટે જુઓ:

ફ્રેગમેન્ટ (fragment) ​

ફ્રેગમેન્ટ (fragment) શબ્દ એક વિશિષ્ટ પ્રકારના VNode નો સંદર્ભ આપે છે જેનો ઉપયોગ અન્ય VNodes માટે પેરન્ટ તરીકે થાય છે, પરંતુ જે પોતે કોઈપણ એલિમેન્ટ્સ રેન્ડર કરતું નથી.

આ નામ નેટિવ DOM API માં DocumentFragment ના સમાન ખ્યાલ પરથી આવ્યું છે.

મલ્ટિપલ રૂટ નોડ્સ (root nodes) ધરાવતા ઘટકોને સપોર્ટ કરવા માટે ફ્રેગમેન્ટ્સનો ઉપયોગ થાય છે. જ્યારે આવા કમ્પોનન્ટ્સ મલ્ટિપલ રૂટ ધરાવતા હોય તેવું લાગે છે, પડદા પાછળ તેઓ ફ્રેગમેન્ટ નોડનો સિંગલ રૂટ તરીકે ઉપયોગ કરે છે, 'રૂટ' નોડ્સના પેરન્ટ તરીકે.

ફ્રેગમેન્ટ્સનો ઉપયોગ ટેમ્પલેટ કમ્પાઇલર દ્વારા મલ્ટિપલ ડાયનેમિક નોડ્સને લપેટવા માટે પણ કરવામાં આવે છે, દા.ત. જે v-for અથવા v-if દ્વારા બનાવવામાં આવ્યા છે. આ VDOM પેચિંગ અલ્ગોરિધમમાં વધારાના સંકેતો (hints) પસાર કરવાની મંજૂરી આપે છે. આમાંનું ઘણું બધું આંતરિક રીતે હેન્ડલ કરવામાં આવે છે, પરંતુ એક જગ્યા જ્યાં તમે આનો સીધો સામનો કરી શકો છો તે છે v-for સાથે <template> ટેગ પર key નો ઉપયોગ કરવો. તે સ્થિતિમાં, key ને ફ્રેગમેન્ટ VNode માં પ્રોપ (#prop) તરીકે ઉમેરવામાં આવે છે.

ફ્રેગમેન્ટ નોડ્સ હાલમાં DOM માં ખાલી ટેક્સ્ટ નોડ્સ તરીકે રેન્ડર કરવામાં આવે છે, જોકે તે અમલીકરણની વિગત છે. જો તમે $el નો ઉપયોગ કરો છો અથવા બિલ્ટ-ઇન બ્રાઉઝર APIs સાથે DOM પર ચાલવાનો પ્રયાસ કરો છો તો તમને તે ટેક્સ્ટ નોડ્સ મળી શકે છે.

ફંક્શનલ કમ્પોનન્ટ (functional component) ​

કમ્પોનન્ટ ડેફિનેશન સામાન્ય રીતે ઓપ્શન્સ ધરાવતો ઓબ્જેક્ટ હોય છે. જો તમે <script setup> નો ઉપયોગ કરી રહ્યાં હોવ તો તે એવું લાગતું નથી, પરંતુ .vue ફાઇલમાંથી એક્સપોર્ટ થયેલ કમ્પોનન્ટ હજુ પણ એક ઓબ્જેક્ટ હશે.

ફંક્શનલ કમ્પોનન્ટ (functional component) એ કમ્પોનન્ટનું વૈકલ્પિક સ્વરૂપ છે જે તેના બદલે ફંક્શનનો ઉપયોગ કરીને જાહેર કરવામાં આવે છે. તે ફંક્શન કમ્પોનન્ટ માટે રેન્ડર ફંક્શન (#render-function) તરીકે કામ કરે છે.

ફંક્શનલ કમ્પોનન્ટનું પોતાનું કોઈ સ્ટેટ હોઈ શકતું નથી. તે સામાન્ય કમ્પોનન્ટ લાઇફસાયકલમાંથી પણ પસાર થતું નથી, તેથી લાઇફસાયકલ હૂક્સનો ઉપયોગ કરી શકાતો નથી. આ તેમને સામાન્ય, સ્ટેટફુલ કમ્પોનન્ટ્સ કરતા થોડા હળવા બનાવે છે.

વધુ વિગતો માટે જુઓ:

હોઇસ્ટિંગ (hoisting) ​

હોઇસ્ટિંગ (hoisting) શબ્દનો ઉપયોગ અન્ય કોડની પહેલાં, કોડના વિભાગને ચલાવવા માટે થાય છે. એક્ઝિક્યુશનને અગાઉના બિંદુ પર 'ખેંચવામાં' આવે છે.

JavaScript અમુક રચનાઓ માટે હોઇસ્ટિંગનો ઉપયોગ કરે છે, જેમ કે var, import અને ફંક્શન ડિક્લેરેશન્સ.

Vue સંદર્ભમાં, કમ્પાઇલર પર્ફોર્મન્સ સુધારવા માટે હોઇસ્ટિંગ લાગુ કરે છે. જ્યારે કમ્પોનન્ટ કમ્પાઇલ કરવામાં આવે છે, ત્યારે સ્ટેટિક વેલ્યુઝ કમ્પોનન્ટના સ્કોપની બહાર ખસેડવામાં આવે છે. આ સ્ટેટિક વેલ્યુઝને 'હોઈસ્ટેડ' તરીકે વર્ણવવામાં આવે છે કારણ કે તે કમ્પોનન્ટની બહાર બનાવવામાં આવે છે.

કેશ સ્ટેટિક (cache static) ​

કેશ (cache) શબ્દનો ઉપયોગ પર્ફોર્મન્સ સુધારવા માટે વારંવાર ઉપયોગમાં લેવાતા ડેટાના કામચલાઉ સંગ્રહનું વર્ણન કરવા માટે થાય છે.

Vue ટેમ્પલેટ કમ્પાઇલર તે સ્ટેટિક VNodes ને ઓળખે છે, પ્રારંભિક રેન્ડર દરમિયાન તેમને કેશ કરે છે, અને દરેક પછીના રિ-રેન્ડર માટે સમાન VNodes નો ફરીથી ઉપયોગ કરે છે.

વધુ વિગતો માટે જુઓ:

ઇન-ડોમ ટેમ્પલેટ (in-DOM template) ​

કમ્પોનન્ટ માટે ટેમ્પલેટ સ્પષ્ટ કરવાની વિવિધ રીતો છે. મોટાભાગના કિસ્સાઓમાં ટેમ્પલેટ સ્ટ્રિંગ તરીકે આપવામાં આવે છે.

ઇન-ડોમ ટેમ્પલેટ (in-DOM template) એ પરિસ્થિતિનો સંદર્ભ આપે છે જ્યાં ટેમ્પલેટ સ્ટ્રિંગના બદલે DOM નોડ્સના રૂપમાં પ્રદાન કરવામાં આવે છે. Vue પછી innerHTML નો ઉપયોગ કરીને DOM નોડ્સને ટેમ્પલેટ સ્ટ્રિંગમાં ફેરવે છે.

સામાન્ય રીતે, ઇન-ડોમ ટેમ્પલેટ પેજના HTML માં સીધા લખેલા HTML માર્કઅપ તરીકે શરૂ થાય છે. બ્રાઉઝર પછી તેને DOM નોડ્સમાં પાર્સ કરે છે, જેનો Vue ઉપયોગ innerHTML વાંચવા માટે કરે છે.

વધુ વિગતો માટે જુઓ:

ઇન્જેક્ટ (inject) ​

જુઓ પ્રોવાઇડ / ઇન્જેક્ટ (#provide-inject).

લાઇફસાયકલ હૂક્સ (lifecycle hooks) ​

Vue કમ્પોનન્ટ ઇન્સ્ટન્સ લાઇફસાયકલમાંથી પસાર થાય છે. ઉદાહરણ તરીકે, તે ક્રિએટ, માઉન્ટ, અપડેટ અને અનમાઉન્ટ થાય છે.

લાઇફસાયકલ હૂક્સ (lifecycle hooks) એ આ લાઇફસાયકલ ઇવેન્ટ્સ સાંભળવાની એક રીત છે.

ઓપ્શન્સ API સાથે, દરેક હૂક અલગ ઓપ્શન તરીકે આપવામાં આવે છે, દા.ત. mounted. કોમ્પોઝિશન API તેના બદલે ફંક્શન્સનો ઉપયોગ કરે છે, જેમ કે onMounted().

વધુ વિગતો માટે જુઓ:

મેક્રો (macro) ​

જુઓ કમ્પાઇલર મેક્રો (#compiler-macro).

નેમ્ડ સ્લોટ (named slot) ​

કમ્પોનન્ટમાં નામ દ્વારા અલગ પડેલા મલ્ટિપલ સ્લોટ્સ હોઈ શકે છે. ડિફોલ્ટ સ્લોટ સિવાયના સ્લોટ્સને નેમ્ડ સ્લોટ્સ (named slots) તરીકે ઓળખવામાં આવે છે.

વધુ વિગતો માટે જુઓ:

ઓપ્શન્સ API (Options API) ​

Vue કમ્પોનન્ટ્સ ઓબ્જેક્ટ્સનો ઉપયોગ કરીને વ્યાખ્યાયિત કરવામાં આવે છે. આ કમ્પોનન્ટ ઓબ્જેક્ટ્સની પ્રોપર્ટીઝ ઓપ્શન્સ (options) તરીકે ઓળખાય છે.

કમ્પોનન્ટ્સ બે શૈલીમાં લખી શકાય છે. એક શૈલી setup (કાં તો setup() ઓપ્શન દ્વારા અથવા <script setup> દ્વારા) ની સાથે કોમ્પોઝિશન API (#composition-api) નો ઉપયોગ કરે છે. બીજી શૈલી કોમ્પોઝિશન API નો બહુ ઓછો સીધો ઉપયોગ કરે છે, તેના બદલે સમાન પરિણામ પ્રાપ્ત કરવા માટે વિવિધ ઘટક ઓપ્શન્સનો ઉપયોગ કરે છે. ઘટક ઓપ્શન્સ કે જેનો આ રીતે ઉપયોગ થાય છે તેને ઓપ્શન્સ (Options) API તરીકે ઓળખવામાં આવે છે.

ઓપ્શન્સ API માં data(), computed, methods અને created() જેવા ઓપ્શન્સનો સમાવેશ થાય છે.

કેટલાક ઓપ્શન્સ, જેમ કે props, emits અને inheritAttrs, બંને API સાથે કમ્પોનન્ટ્સ લખતી વખતે ઉપયોગમાં લઈ શકાય છે. ઘટક ઓપ્શન્સ હોવાથી, તેમને ઓપ્શન્સ API નો ભાગ ગણી શકાય. જો કે, આ વિકલ્પોનો ઉપયોગ setup() ની સાથે પણ થતો હોવાથી, સામાન્ય રીતે તેમને બે કમ્પોનન્ટ શૈલીઓ વચ્ચે શેર કરેલા તરીકે વિચારવું વધુ ઉપયોગી છે.

setup() ફંક્શન પોતે એક ઘટક ઓપ્શન છે, તેથી તેને ઓપ્શન્સ API ના ભાગ તરીકે વર્ણવી શકાય. જો કે, આ રીતે 'ઓપ્શન્સ API' શબ્દનો સામાન્ય રીતે ઉપયોગ થતો નથી. તેના બદલે, setup() ફંક્શન કોમ્પોઝિશન API નો ભાગ માનવામાં આવે છે.

પ્લગિન (plugin) ​

જ્યારે પ્લગિન (plugin) શબ્દનો ઉપયોગ વિવિધ સંદર્ભોમાં થઈ શકે છે, ત્યારે Vue પાસે એપ્લિકેશનમાં કાર્યક્ષમતા ઉમેરવાની એક રીત તરીકે પ્લગિનનો વિશિષ્ટ ખ્યાલ છે.

app.use(plugin) કોલ કરીને એપ્લિકેશનમાં પ્લગિન્સ ઉમેરવામાં આવે છે. પ્લગિન પોતે કાં તો ફંક્શન હોય છે અથવા install ફંક્શન સાથેનો ઓબ્જેક્ટ હોય છે. તે ફંક્શનને એપ્લિકેશન ઇન્સ્ટન્સ પાસ કરવામાં આવશે અને તે પછી જે કરવાની જરૂર હોય તે કરી શકે છે.

વધુ વિગતો માટે જુઓ:

પ્રોપ (prop) ​

Vue માં પ્રોપ (prop) શબ્દના ત્રણ સામાન્ય ઉપયોગો છે:

  • કમ્પોનન્ટ પ્રોપ્સ (Component props)
  • VNode પ્રોપ્સ (VNode props)
  • સ્લોટ પ્રોપ્સ (Slot props)

કમ્પોનન્ટ પ્રોપ્સ તે છે જે મોટાભાગના લોકો પ્રોપ્સ તરીકે વિચારે છે. આ defineProps() અથવા props ઓપ્શનનો ઉપયોગ કરીને ઘટક દ્વારા સ્પષ્ટપણે વ્યાખ્યાયિત કરવામાં આવે છે.

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

સ્લોટ પ્રોપ્સ એ સ્કોપ્ડ સ્લોટમાં પસાર થયેલી પ્રોપર્ટીઝ છે.

તમામ કિસ્સાઓમાં, પ્રોપ્સ એવી પ્રોપર્ટીઝ છે જે બીજે ક્યાંકથી પાસ કરવામાં આવે છે.

જોકે પ્રોપ્સ શબ્દ પ્રોપર્ટીઝ (properties) શબ્દ પરથી ઉતરી આવ્યો છે, તેમ છતાં Vue ના સંદર્ભમાં પ્રોપ્સ શબ્દનો અર્થ ઘણો વિશિષ્ટ છે. તમારે પ્રોપર્ટીઝના સંક્ષેપ (abbreviation) તરીકે તેનો ઉપયોગ કરવાનું ટાળવું જોઈએ.

વધુ વિગતો માટે જુઓ:

પ્રોવાઇડ / ઇન્જેક્ટ (provide / inject) ​

provide અને inject એ આંતર-ઘટક સંચાર (inter-component communication) નું એક સ્વરૂપ છે.

જ્યારે કોઈ ઘટક વેલ્યુ પૂરું પાડે છે (provides), ત્યારે તે ઘટકના તમામ વંશજો (descendants) inject નો ઉપયોગ કરીને તે વેલ્યુ લેવાનું પસંદ કરી શકે છે. પ્રોપ્સથી વિપરીત, પ્રોવાઇડર ઘટક ચોક્કસ રીતે જાણતું નથી કે કયો ઘટક વેલ્યુ પ્રાપ્ત કરી રહ્યો છે.

provide અને inject નો ઉપયોગ ક્યારેક પ્રોપ ડ્રિલિંગ (prop drilling) ટાળવા માટે થાય છે. તેનો ઉપયોગ ઘટક માટે તેના સ્લોટ કન્ટેન્ટ સાથે વાતચીત કરવા માટે ગર્ભિત (implicit) રીત તરીકે પણ થઈ શકે છે.

provide નો ઉપયોગ એપ્લિકેશન સ્તર પર પણ થઈ શકે છે, જે તે એપ્લિકેશનની અંદરના તમામ ઘટકો માટે વેલ્યુ ઉપલબ્ધ બનાવે છે.

વધુ વિગતો માટે જુઓ:

રિએક્ટિવ ઇફેક્ટ (reactive effect) ​

રિએક્ટિવ ઇફેક્ટ (reactive effect) એ Vue ની રિએક્ટિવિટી સિસ્ટમનો ભાગ છે. તે ફંક્શનની ડિપેન્ડન્સીસને ટ્રેક કરવાની અને જ્યારે તે ડિપેન્ડન્સીસની વેલ્યુઝ બદલાય ત્યારે તે ફંક્શનને ફરીથી ચલાવવાની પ્રક્રિયાનો સંદર્ભ આપે છે.

watchEffect() એ ઇફેક્ટ બનાવવાની સૌથી સીધી રીત છે. Vue ના અન્ય વિવિધ ભાગો આંતરિક રીતે ઇફેક્ટ્સનો ઉપયોગ કરે છે. દા.ત. કમ્પોનન્ટ રેન્ડરિંગ અપડેટ્સ, computed() અને watch().

Vue માત્ર રિએક્ટિવ ઇફેક્ટની અંદર રિએક્ટિવ ડિપેન્ડન્સીસને ટ્રેક કરી શકે છે. જો પ્રોપર્ટીની વેલ્યુ રિએક્ટિવ ઇફેક્ટની બહાર વાંચવામાં આવે તો તે રિએક્ટિવિટી 'ગુમાવશે', તે અર્થમાં કે જો તે પ્રોપર્ટી પછીથી બદલાય તો Vue શું કરવું તે જાણશે નહીં.

આ શબ્દ 'સાઇડ ઇફેક્ટ (side effect)' પરથી આવ્યો છે. ઇફેક્ટ ફંક્શનને કોલ કરવું એ પ્રોપર્ટી વેલ્યુ બદલાવાની સાઇડ ઇફેક્ટ છે.

વધુ વિગતો માટે જુઓ:

રિએક્ટિવિટી (reactivity) ​

સામાન્ય રીતે, રિએક્ટિવિટી (reactivity) એ ડેટાના ફેરફારોના પ્રતિભાવમાં આપમેળે ક્રિયાઓ કરવાની ક્ષમતાનો સંદર્ભ આપે છે. ઉદાહરણ તરીકે, જ્યારે ડેટા વેલ્યુ બદલાય ત્યારે DOM ને અપડેટ કરવું અથવા નેટવર્ક વિનંતી કરવી.

Vue સંદર્ભમાં, રિએક્ટિવિટીનો ઉપયોગ સુવિધાઓના સંગ્રહનું વર્ણન કરવા માટે થાય છે. તે સુવિધાઓ ભેગા થઈને રિએક્ટિવિટી સિસ્ટમ બનાવે છે, જે રિએક્ટિવિટી API (#reactivity-api) દ્વારા એક્સપોઝ થાય છે.

રિએક્ટિવિટી સિસ્ટમને અમલમાં મૂકવાની વિવિધ રીતો હોઈ શકે છે. ઉદાહરણ તરીકે, તે તેની ડિપેન્ડન્સીસ નક્કી કરવા માટે કોડના સ્ટેટિક વિશ્લેષણ દ્વારા કરી શકાય છે. જો કે, Vue તે પ્રકારની રિએક્ટિવિટી સિસ્ટમનો ઉપયોગ કરતું નથી.

તેના બદલે, Vue ની રિએક્ટિવિટી સિસ્ટમ રનટાઇમ પર પ્રોપર્ટી એક્સેસને ટ્રેક કરે છે. તે પ્રોક્સી રેપર્સ અને પ્રોપર્ટીઝ માટે ગેટર (getter)/સેટર (setter) ફંક્શન્સ બંનેનો ઉપયોગ કરીને આ કરે છે.

વધુ વિગતો માટે જુઓ:

રિએક્ટિવિટી API (Reactivity API) ​

રિએક્ટિવિટી API એ રિએક્ટિવિટી (#reactivity) સંબંધિત મુખ્ય Vue ફંક્શન્સનો સંગ્રહ છે. આ ઘટકોથી સ્વતંત્ર રીતે વાપરી શકાય છે. તેમાં ref(), reactive(), computed(), watch() અને watchEffect() જેવા ફંક્શન્સનો સમાવેશ થાય છે.

રિએક્ટિવિટી API કોમ્પોઝિશન API નો સબસેટ છે.

વધુ વિગતો માટે જુઓ:

રેફ (ref) ​

આ એન્ટ્રી રિએક્ટિવિટી માટે ref ના ઉપયોગ વિશે છે. ટેમ્પલેટ્સમાં વપરાતા ref એટ્રિબ્યુટ માટે, તેના બદલે ટેમ્પલેટ રેફ (#template-ref) જુઓ.

એક ref એ Vue ની રિએક્ટિવિટી સિસ્ટમનો ભાગ છે. તે એક સિંગલ રિએક્ટિવ પ્રોપર્ટી ધરાવતો ઓબ્જેક્ટ છે, જેને value કહેવામાં આવે છે.

રેફના વિવિધ પ્રકારો છે. ઉદાહરણ તરીકે, ref(), shallowRef(), computed(), અને customRef() નો ઉપયોગ કરીને રેફ્સ બનાવી શકાય છે. ફંક્શન isRef() નો ઉપયોગ ઓબ્જેક્ટ રેફ છે કે નહીં તે તપાસવા માટે થઈ શકે છે, અને isReadonly() નો ઉપયોગ રેફ તેની વેલ્યુના સીધા પુનઃ અસાઇનમેન્ટની મંજૂરી આપે છે કે કેમ તે તપાસવા માટે થઈ શકે છે.

વધુ વિગતો માટે જુઓ:

રેન્ડર ફંક્શન (render function) ​

રેન્ડર ફંક્શન (render function) એ ઘટકનો તે ભાગ છે જે રેન્ડરિંગ દરમિયાન વપરાતા VNodes જનરેટ કરે છે. ટેમ્પલેટ્સ રેન્ડર ફંક્શન્સમાં કમ્પાઇલ કરવામાં આવે છે.

વધુ વિગતો માટે જુઓ:

શેડ્યૂલર (scheduler) ​

શેડ્યૂલર (scheduler) એ Vue ના આંતરિક ભાગોનો તે ભાગ છે જે રિએક્ટિવ ઇફેક્ટ્સ (#reactive-effect) ક્યારે ચલાવવી તેના સમયને નિયંત્રિત કરે છે.

જ્યારે રિએક્ટિવ સ્ટેટ બદલાય છે, ત્યારે Vue તરત જ રેન્ડરિંગ અપડેટ્સ ટ્રિગર કરતું નથી. તેના બદલે, તે કતાર (queue) નો ઉપયોગ કરીને તેમને બેચ કરે છે. આ સુનિશ્ચિત કરે છે કે ઘટક માત્ર એક જ વાર રિ-રેન્ડર થાય, ભલે અંતર્ગત ડેટામાં અનેક ફેરફારો કરવામાં આવ્યા હોય.

વોચર્સ (Watchers) ને શેડ્યૂલર કતારનો ઉપયોગ કરીને બેચ પણ કરવામાં આવે છે. flush: 'pre' (ડિફોલ્ટ) ધરાવતા વોચર્સ ઘટક રેન્ડરિંગ પહેલા ચાલશે, જ્યારે flush: 'post' ધરાવતા વોચર્સ ઘટક રેન્ડરિંગ પછી ચાલશે.

શેડ્યૂલરમાં જોબ્સનો ઉપયોગ અન્ય વિવિધ આંતરિક કાર્યો કરવા માટે પણ થાય છે, જેમ કે અમુક લાઇફસાયકલ હૂક્સ (#lifecycle-hooks) ટ્રિગર કરવા અને ટેમ્પલેટ રેફ્સ (#template-ref) અપડેટ કરવા.

સ્કોપ્ડ સ્લોટ (scoped slot) ​

સ્કોપ્ડ સ્લોટ (scoped slot) શબ્દનો ઉપયોગ એવા સ્લોટ (#slot) નો સંદર્ભ આપવા માટે થાય છે જે પ્રોપ્સ (#prop) મેળવે છે.

ઐતિહાસિક રીતે, Vue એ સ્કોપ્ડ અને નોન-સ્કોપ્ડ સ્લોટ્સ વચ્ચે ઘણો મોટો તફાવત રાખ્યો હતો. અમુક હદ સુધી તેઓને સામાન્ય ટેમ્પલેટ સિન્ટેક્સ પાછળ એકીકૃત બે અલગ-અલગ સુવિધાઓ તરીકે ગણી શકાય.

Vue 3 માં, તમામ સ્લોટ્સને સ્કોપ્ડ સ્લોટ્સની જેમ વર્તે તે માટે સ્લોટ APIs ને સરળ બનાવવામાં આવ્યા હતા. જો કે, સ્કોપ્ડ અને નોન-સ્કોપ્ડ સ્લોટ્સ માટેના ઉપયોગના કિસ્સાઓ ઘણીવાર અલગ હોય છે, તેથી પ્રોપ્સ સાથેના સ્લોટ્સનો સંદર્ભ લેવા માટે આ શબ્દ હજુ પણ ઉપયોગી સાબિત થાય છે.

સ્લોટમાં પસાર કરાયેલા પ્રોપ્સનો ઉપયોગ ફક્ત પેરન્ટ ટેમ્પલેટના ચોક્કસ ક્ષેત્રમાં જ થઈ શકે છે, જે સ્લોટના કન્ટેન્ટને વ્યાખ્યાયિત કરવા માટે જવાબદાર છે. ટેમ્પલેટનું આ ક્ષેત્ર પ્રોપ્સ માટે વેરિએબલ સ્કોપ તરીકે કામ કરે છે, તેથી તેનું નામ 'સ્કોપ્ડ સ્લોટ' છે.

વધુ વિગતો માટે જુઓ:

SFC ​

જુઓ સિંગલ-ફાઇલ કમ્પોનન્ટ (#single-file-component).

સાઇડ ઇફેક્ટ (side effect) ​

સાઇડ ઇફેક્ટ (side effect) શબ્દ Vue માટે વિશિષ્ટ નથી. તેનો ઉપયોગ એવા ઓપરેશન્સ અથવા ફંક્શન્સનું વર્ણન કરવા માટે થાય છે જે તેમના લોકલ સ્કોપની બહાર કંઈક કરે છે.

ઉદાહરણ તરીકે, user.name = null જેવી પ્રોપર્ટી સેટ કરવાના સંદર્ભમાં, એવી અપેક્ષા રાખવામાં આવે છે કે આ user.name ની વેલ્યુ બદલશે. જો તે બીજું કંઈક પણ કરે છે, જેમ કે Vue ની રિએક્ટિવિટી સિસ્ટમને ટ્રિગર કરવી, તો તેને સાઇડ ઇફેક્ટ તરીકે વર્ણવવામાં આવશે. આ Vue ની અંદર રિએક્ટિવ ઇફેક્ટ (#reactive-effect) શબ્દનું મૂળ છે.

જ્યારે ફંક્શનને સાઇડ ઇફેક્ટ ધરાવતા તરીકે વર્ણવવામાં આવે છે, ત્યારે તેનો અર્થ એ થાય છે કે ફંક્શન ફક્ત વેલ્યુ પરત કરવા સિવાય, ફંક્શનની બહાર નિરીક્ષણ કરી શકાય તેવી કોઈ પ્રકારની ક્રિયા કરે છે. આનો અર્થ એ હોઈ શકે છે કે તે સ્ટેટમાં વેલ્યુ અપડેટ કરે છે અથવા નેટવર્ક વિનંતીને ટ્રિગર કરે છે.

આ શબ્દનો ઉપયોગ વારંવાર રેન્ડરિંગ અથવા કમ્પ્યુટેડ પ્રોપર્ટીઝનું વર્ણન કરતી વખતે થાય છે. રેન્ડરિંગમાં કોઈ સાઇડ ઇફેક્ટ ન હોવી તે શ્રેષ્ઠ પ્રેક્ટિસ માનવામાં આવે છે. તેવી જ રીતે, કમ્પ્યુટેડ પ્રોપર્ટી માટેના ગેટર ફંક્શનમાં કોઈ સાઇડ ઇફેક્ટ હોવી જોઈએ નહીં.

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

સિંગલ-ફાઇલ કમ્પોનન્ટ અથવા SFC શબ્દ .vue ફાઇલ ફોર્મેટનો સંદર્ભ આપે છે જે સામાન્ય રીતે Vue કમ્પોનન્ટ્સ માટે વપરાય છે.

આ પણ જુઓ:

સ્લોટ (slot) ​

ચાઇલ્ડ ઘટકોમાં કન્ટેન્ટ પાસ કરવા માટે સ્લોટ્સનો ઉપયોગ થાય છે. જ્યારે પ્રોપ્સનો ઉપયોગ ડેટા વેલ્યુઝ પાસ કરવા માટે થાય છે, સ્લોટ્સનો ઉપયોગ HTML એલિમેન્ટ્સ અને અન્ય Vue કમ્પોનન્ટ્સ ધરાવતા સમૃદ્ધ કન્ટેન્ટને પાસ કરવા માટે થાય છે.

વધુ વિગતો માટે જુઓ:

ટેમ્પલેટ રેફ (template ref) ​

ટેમ્પલેટ રેફ (template ref) શબ્દ ટેમ્પલેટની અંદર ટેગ પર ref એટ્રિબ્યુટનો ઉપયોગ કરવાનો સંદર્ભ આપે છે. ઘટક રેન્ડર થયા પછી, આ એટ્રિબ્યુટનો ઉપયોગ કાં તો HTML એલિમેન્ટ અથવા કમ્પોનન્ટ ઇન્સ્ટન્સ સાથેની પ્રોપર્ટી ભરવા માટે થાય છે જે ટેમ્પલેટના ટેગને અનુરૂપ છે.

જો તમે ઓપ્શન્સ API નો ઉપયોગ કરી રહ્યાં છો, તો રેફ્સ $refs ઓબ્જેક્ટની પ્રોપર્ટીઝ દ્વારા એક્સપોઝ થાય છે.

કોમ્પોઝિશન API ની સાથે, ટેમ્પલેટ રેફ્સ સમાન નામ સાથેના રિએક્ટિવ રેફ (#ref) ને ભરે છે.

ટેમ્પલેટ રેફ્સને Vue ની રિએક્ટિવિટી સિસ્ટમમાં જોવા મળતા રિએક્ટિવ રેફ્સ સાથે ગૂંચવવો જોઈએ નહીં.

વધુ વિગતો માટે જુઓ:

VDOM ​

જુઓ વર્ચ્યુઅલ DOM (#virtual-dom).

વર્ચ્યુઅલ DOM (virtual DOM) ​

વર્ચ્યુઅલ DOM (VDOM) શબ્દ Vue માટે અનન્ય નથી. તે UI માં અપડેટ્સ મેનેજ કરવા માટે અનેક વેબ ફ્રેમવર્ક દ્વારા ઉપયોગમાં લેવાતો એક સામાન્ય અભિગમ છે.

બ્રાઉઝર્સ પેજની વર્તમાન સ્થિતિ રજૂ કરવા માટે નોડ્સના ટ્રી (tree) નો ઉપયોગ કરે છે. તે ટ્રી, અને તેની સાથે સંપર્ક કરવા માટે વપરાતા JavaScript APIs ને ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડેલ (document object model) અથવા DOM તરીકે ઓળખવામાં આવે છે.

DOM ને મેનીપ્યુલેટ કરવું એ મુખ્ય પર્ફોર્મન્સ અવરોધ (bottleneck) છે. વર્ચ્યુઅલ DOM તે મેનેજ કરવા માટે એક વ્યૂહરચના પ્રદાન કરે છે.

સીધા DOM નોડ્સ બનાવવાને બદલે, Vue કમ્પોનન્ટ્સ તેમને કયા DOM નોડ્સ જોઈએ છે તેનું વર્ણન જનરેટ કરે છે. આ વર્ણનકર્તાઓ (descriptors) સાદા JavaScript ઓબ્જેક્ટ્સ છે, જે VNodes (વર્ચ્યુઅલ DOM નોડ્સ) તરીકે ઓળખાય છે. VNodes બનાવવું પ્રમાણમાં સસ્તું છે.

દરેક વખતે જ્યારે ઘટક ફરીથી રેન્ડર થાય છે, ત્યારે VNodes ના નવા ટ્રીની સરખામણી VNodes ના પાછલા ટ્રી સાથે કરવામાં આવે છે અને પછી કોઈપણ તફાવતો વાસ્તવિક DOM પર લાગુ કરવામાં આવે છે. જો કંઈ બદલાયું ન હોય તો DOM ને સ્પર્શ કરવાની જરૂર નથી.

Vue એક હાઇબ્રિડ અભિગમ વાપરે છે જેને આપણે કમ્પાઇલર-ઇન્ફોર્મ્ડ વર્ચ્યુઅલ DOM (Compiler-Informed Virtual DOM) કહીએ છીએ. Vue નું ટેમ્પલેટ કમ્પાઇલર ટેમ્પલેટના સ્ટેટિક વિશ્લેષણના આધારે પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશન લાગુ કરવામાં સક્ષમ છે. રનટાઇમ પર ઘટકના જૂના અને નવા VNode ટ્રીની સંપૂર્ણ સરખામણી કરવાને બદલે, Vue સરખામણીને ટ્રીના ફક્ત તે ભાગો સુધી મર્યાદિત કરવા માટે કમ્પાઇલર દ્વારા કાઢવામાં આવેલી માહિતીનો ઉપયોગ કરી શકે છે જે ખરેખર બદલાઈ શકે છે.

વધુ વિગતો માટે જુઓ:

VNode ​

એક VNode એ વર્ચ્યુઅલ DOM નોડ (virtual DOM node) છે. તેઓ h() ફંક્શનનો ઉપયોગ કરીને બનાવી શકાય છે.

વધુ માહિતી માટે વર્ચ્યુઅલ DOM (#virtual-dom) જુઓ.

વેબ ઘટક (Web Component) ​

વેબ ઘટકો (Web Components) સ્ટાન્ડર્ડ એ આધુનિક વેબ બ્રાઉઝર્સમાં અમલમાં મૂકવામાં આવેલી સુવિધાઓનો સંગ્રહ છે.

Vue કમ્પોનન્ટ્સ વેબ કમ્પોનન્ટ્સ નથી, પરંતુ Vue કમ્પોનન્ટમાંથી કસ્ટમ એલિમેન્ટ (#custom-element) બનાવવા માટે defineCustomElement() નો ઉપયોગ કરી શકાય છે. Vue ઘટકોની અંદર કસ્ટમ એલિમેન્ટ્સના ઉપયોગને પણ સપોર્ટ કરે છે.

વધુ વિગતો માટે જુઓ:

Edit this page on GitHub