Vue 'निर्यात डिफ़ॉल्ट' बनाम 'नया Vue'

136

मैंने बस Vue स्थापित किया है और vue-cli webpack टेम्पलेट का उपयोग करके प्रोजेक्ट बनाने के लिए कुछ ट्यूटोरियल का अनुसरण कर रहा हूं। जब यह घटक बनाता है, तो मुझे लगता है कि यह हमारे डेटा को निम्नलिखित में बांधता है:

export default {
    name: 'app',
    data: []
}

जबकि अन्य ट्यूटोरियल में मैं देख रहा हूँ:

new Vue({
    el: '#app',
    data: []
)}

क्या अंतर है, और ऐसा क्यों लगता है कि दोनों के बीच वाक्यविन्यास अलग है? मुझे 'नया Vue' कोड प्राप्त करने में परेशानी हो रही है, मैं vue-cli द्वारा उत्पन्न टैग से App.vue का उपयोग कर रहा हूं।

vue.js vue-component vue-cli

— rockzombie2
स्रोत

vscode के लिए धन्यवाद!

— पीटी

162

जब आप घोषणा करते हैं:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

यह आमतौर पर आपका रूट Vue उदाहरण है कि शेष एप्लिकेशन से उतरता है। उदाहरण के लिए, HTML डॉक्यूमेंट में घोषित रूट एलिमेंट को हैंग करता है:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

अन्य वाक्यविन्यास एक घटक घोषित कर रहा है जिसे बाद में पंजीकृत और पुन: उपयोग किया जा सकता है। उदाहरण के लिए, यदि आप एक एकल फ़ाइल घटक बनाते हैं जैसे:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

आप इसे बाद में आयात कर सकते हैं और इसका उपयोग कर सकते हैं:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

इसके अलावा, अपने dataगुणों को कार्यों के रूप में घोषित करना सुनिश्चित करें , अन्यथा वे प्रतिक्रियाशील नहीं होंगे।

4

ठीक है, इसलिए जब भी आप "MyApp.vue" घटक फ़ाइल में काम कर रहे हैं, तो आप "निर्यात डिफ़ॉल्ट {}" वाक्यविन्यास का उपयोग कर रहे होंगे, लेकिन अन्यथा अगर आप सादे HTML फ़ाइल में केवल Vue का उपयोग कर रहे हैं, तो आप "नया Vue ({})" का उपयोग कर, सही है?

— रॉकजॉम्बरी 2

4

सहसा बोली, हाँ। चाहे आप HTML डॉक में ही रूट इंस्टेंस बनाते हों या एक्सटर्नल फाइल - यानी main.js- वास्तव में कोई फर्क नहीं पड़ता, बस यह जान लें कि यह एप्लिकेशन का शुरुआती बिंदु है, int main()सी। Component.vueफाइल में एंक हमेशा export default { ... }सिंटैक्स का उपयोग करेगा । डॉक्स एक अच्छा काम करते हैं, जो घटकों, वैश्विक , स्थानीय और एकल फ़ाइल के

मैं पहले नए Vue ({el: '#app', data () {return {msg: 'A'}})} का अनुसरण कर रहा हूं, फिर जब मैं {{msg}} संपत्ति या विधि का उपयोग करने की कोशिश करता हूं तो "संदेश" नहीं है उदाहरण पर परिभाषित लेकिन संदर्भित क्यों? @ user320487

— user123456

8

export default Vue घटक के लिए स्थानीय पंजीकरण बनाने के लिए उपयोग किया जाता है।

यहाँ एक महान लेख है जो घटकों के बारे में अधिक व्याख्या करता है https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
स्रोत

5

उपयोग के लिए कुछ वस्तु परिभाषा उपलब्ध करने के लिए पहला मामला ( export default {...}) ES2015 वाक्यविन्यास है।

दूसरा मामला ( new Vue (...)) परिभाषित किए गए ऑब्जेक्ट को तत्काल करने के लिए मानक वाक्यविन्यास है।

जेएस को बूटस्ट्रैप व्यू के लिए पहले इस्तेमाल किया जाएगा, जबकि या तो घटकों और टेम्पलेट्स को बनाने के लिए इस्तेमाल किया जा सकता है।

अधिक जानकारी के लिए https://vuejs.org/v2/guide/compords-registration.html देखें ।

— Shellum
स्रोत

3

जब भी आप उपयोग करें

export someobject

और someobject है

{
 "prop1":"Property1",
 "prop2":"Property2",
}

ऊपर आप का उपयोग कर कहीं भी आयात कर सकते हैं import या module.jsवहाँ आप someobject का उपयोग कर सकते हैं। यह कोई प्रतिबंध नहीं है कि कोई वस्तु एक वस्तु होगी केवल यह एक कार्य भी हो सकती है, एक वर्ग या एक वस्तु।

जब आप कहें

new Object()

जैसा कि आपने कहा

new Vue({
  el: '#app',
  data: []
)}

यहां आप वर्ग Vue की एक वस्तु शुरू कर रहे हैं।

मुझे उम्मीद है कि मेरा उत्तर सामान्य रूप से और अधिक स्पष्ट रूप से आपकी क्वेरी की व्याख्या करता है।

— DHRUV GUPTA
स्रोत