Vue: [२.०] कार्यात्मक घटकों के लिए टेम्पलेट

हमारे पास पहले से ही हमारे रोडमैप पर एक विकल्प के रूप में है। हालाँकि, हम इसे तब तक स्थगित रखेंगे जब तक कि 2.0 वर्तमान रिलीज़ के बाद के चरण से बाहर नहीं हो जाता है और हमारे पास 2.0 के लिए पारिस्थितिकी तंत्र में जो काम बचा है, वह पूरा हो गया है, क्योंकि इसमें सही होने, परीक्षण करने आदि के लिए काफी मात्रा में काम शामिल होगा (भी , इसके साथ vue-loader/vueify कार्य करना आदि pp.)

पीओसी के लिए धन्यवाद, मददगार लगता है!

जी बोलिये।
मैं ठीक यही देख रहा था। मेरे लिए, रेंडर फ़ंक्शन बहुत भारी हैं और एकल फ़ाइल घटक के समग्र अनुभव से "महसूस" करते हैं।

मेरे लिए सबसे उपयोगी क्या होगा सीएसएस को कार्यात्मक घटकों पर दायर करना।

क्या हम इस कार्यात्मक एकल फ़ाइल घटक पर स्थिति अद्यतन प्राप्त कर सकते हैं? मैं रिएक्ट से आ रहा हूं और इसे काफी याद कर रहा हूं।

यह जल्द ही आ रहा है।

क्या कोई n00b के लिए समझा सकता है कि हमारे पास अभी जो है उसके मुकाबले इसमें नया क्या है?

आप इस तरह .vue फाइलों के साथ कार्यात्मक घटक बनाने में सक्षम होंगे:

<template functional>
  <div class="test">
    <h1>{{props.msg}}</h1>
    <h2>Static content</h2>
    <span v-for="n in 10">{{n}} </span>
    <button @click="console.log('click', props.msg)"><slot></slot></button>
  </div>
</template>

<script>
export default {
  props: ['msg'],
}
</script>

<style scoped>
.test {
  margin: 12;
}
</style>

आह ठीक है धन्यवाद !!

उसका दिखना बहुत ही बढ़िया है। इस सुविधा को कब जारी किया जाएगा, इसकी समय सीमा के बारे में कोई विचार?

यह कार्यात्मक घटकों को उपयोग करने में इतना आसान बनाने जा रहा है!

इस विषय पर कोई अपडेट? क्या यह 2.3 रिलीज का हिस्सा होगा?

@Akryum क्या आप इस मुद्दे की स्थिति जानते हैं? ऐसा लगता है कि यह महीनों से अधर में है। क्या इसे आगे बढ़ाने में मदद के लिए हम कुछ कर सकते हैं?

/पिंग @ ब्लेक-न्यूमैन

क्या इस सुविधा के बारे में कोई खबर है?

लगता है इस पर फरवरी में काम शुरू किया गया था: https://github.com/vuejs/vue/tree/feature/fn-templates

क्या इस पर कोई अपडेट है? अब कुछ समय हो गया है - क्या इस मुद्दे को आगे बढ़ाने में मदद के लिए कुछ किया जा सकता है?

@Akryum फरवरी में आपके टीज़र के बाद से, यह पानी में मृत लग रहा है। @ ब्लेक-न्यूमैन मैं देख रहा हूं कि आपको कुछ महीने पहले पिंग किया गया था, क्या आपको इस मुद्दे पर कोई जानकारी है?

मुझे खेद है कि अगर यह परेशान हो रहा है, तो मैं वास्तव में जानना चाहता हूं कि हम इसे कैसे कर सकते हैं :)

@scottbedard मैं इस पर काम कर रहा था, कुछ छिपे हुए गोचर थे। हालाँकि, इन्हें केवल अनुपयोगी सुविधाओं के रूप में प्रलेखित किया जा सकता है। काम काफी समय पहले किया गया था और दुर्भाग्य से रेंडरिंग सिस्टम की वर्तमान स्थिति को मैप नहीं करता है, इसलिए काम करने की आवश्यकता होगी।

@vuejs/सहयोगी समग्र रूप से इस सुविधा के बारे में आपकी क्या राय है, क्या विकास प्रयास और इस सुविधा के मूल में अतिरिक्त लागत है?

मुझे लगता है कि फीचर होना अच्छा है, क्योंकि घटकों को लिखने का डिफ़ॉल्ट तरीका टेम्पलेट्स का उपयोग कर रहा है। और आईएमएचओ घटकों (टेम्पलेट्स कंपाइलर में प्रयुक्त) से सभी प्रतिपादन कार्यों को डिकूप करना बहुत अच्छा होगा।

समस्या यह है कि कार्यात्मक रूप से टेम्पलेट्स का उपयोग करने का दायरा सीमित है, जेएसएक्स/रेंडर फ़ंक्शंस का उपयोग करने से कहीं अधिक है। ए

मुझे लगता है कि कार्यात्मक घटकों के निर्माण के बिंदु पर, बाधाएं और डिजाइन पैटर्न टेम्पलेट मॉडल में फिट नहीं होते हैं। इस सुविधा के लिए कुछ अतिरिक्त रनटाइम की आवश्यकता होती है (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) और कभी भी शुद्ध रेंडर फ़ंक्शन के समान प्रदर्शन नहीं होगा।

इस सुविधा को सक्षम करने से बेहतर प्रदर्शन होगा, शुद्ध रेंडर फ़ंक्शंस की तुलना में यह सच नहीं है। इस समय फीचर पर मेरा रुख यह है कि यह केवल टेम्प्लेट को उपयोग की जाने वाली कार्यक्षमता के लिए सशक्त बनाएगा, लेकिन कोई सच्चा इनाम नहीं देता है।

साथ ही, कार्यात्मक घटकों के लिए स्कोप्ड स्टाइल समर्थन होना अच्छा होगा लेकिन यह असंबंधित हो सकता है।

यह असंबंधित है, मेरा मानना ​​है कि यह काम कर रहा है। मैंने पहले उस पर काम किया था। जब तक कोई प्रतिगमन न हो?

रिएक्ट की तुलना में Vue के कार्यात्मक घटक थोड़े बदसूरत हैं। template jsx तुलना template बहुत कम कार्यात्मक है। शायद आप रूपांतरण प्रसंस्करण के लिए vue-loader उधार ले सकते हैं, उम्मीद है कि इस तरह:

<script functional>
const DumbCmp = props => (
  <Button>{props.label}</Button>
);

export default DumbCmp;
</script>

वास्तव में, कुछ लोगों ने यह सेवा महीनों पहले की है https://github.com/nickmessing/babel-plugin-jsx-vue-functional

क्या हम इसी का इंतजार कर रहे हैं? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

हां, Vue 2.5 + vue-loader 13.3 में टेम्पलेट संकलन, स्कोप्ड CSS और कार्यात्मक घटकों के लिए हॉट-रीलोड के लिए उचित समर्थन होगा :)

क्या कार्यात्मक घटकों से $ उत्सर्जित करना संभव है?

जब तक मैं गलत नहीं हूँ, संक्षिप्त उत्तर नहीं है। एक कार्यात्मक घटक एक उदाहरण नहीं है, और इसलिए इसकी कोई विधि नहीं है।

कुछ हैकरी के माध्यम से, मेरा मानना ​​है कि आप वास्तव में उत्सर्जन कर सकते हैं। रेंडर fn द्वारा प्राप्त संदर्भ वस्तु में एक parent जो हमेशा एक Vue उदाहरण होना चाहिए। अधिक वैश्विक दृष्टिकोण अपनाने के लिए आप context.parent.$emit() या context.parent.$root.$emit() सकते हैं। जैसा कि आप देख सकते हैं, यह कार्यात्मक घटक से निकलने वाली घटना नहीं है, इसलिए आपके उपयोग के मामले के आधार पर, यह संभवतः सबसे अच्छा समाधान नहीं है।

अरे, मैं अपने कुछ डैशबोर्ड तत्वों को अनुकूलित करने और एक एसएफसी घटक कार्यात्मक ध्वनि बनाने में शोध कर रहा था, लेकिन मैं वहां कोई विधि या गणना की गई प्रोप नहीं कर पाऊंगा, है ना?
यदि मैं एक रेंडर फ़ंक्शन या JSX का उपयोग करता हूं, तो मैं कम से कम रेंडर फ़ंक्शन के अंदर उन्हें स्वयं परिभाषित कर सकता हूं, सही?

क्या कार्यात्मक घटकों से $ उत्सर्जित करना संभव है?

आप कार्यात्मक संदर्भ पर listeners ऑब्जेक्ट तक पहुंच सकते हैं। उदाहरण के लिए:

<my-functional-component @request-something="onRequestSomething" />

श्रोता को my-functional-component अंदर एक विधि की तरह कॉल करें:

listeners['request-something'](42)

यदि मैं एक रेंडर फ़ंक्शन या JSX का उपयोग करता हूं, तो मैं कम से कम रेंडर फ़ंक्शन के अंदर उन्हें स्वयं परिभाषित कर सकता हूं, सही?

हां।

@Akryum धन्यवाद। जेएसएक्स के साथ बड़े, अधिक टेम्पलेट भारी func घटक बेहतर हो सकते हैं क्योंकि मानक रेंडर फ़ंक्शन चीजों को पढ़ने में थोड़ा कठिन बना देंगे। इन पर एक और अधिक उन्नत ट्यूटोरियल वास्तव में मीठा होगा :)

अब आपको कार्यात्मक घटकों के साथ रेंडर फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है।
आप टेम्प्लेट का उपयोग कर सकते हैं

शुक्र, ५ जनवरी, २०१८ को सुबह ४:५३ बजे, डोब्रोमिर ह्रिस्तोव नोटिफिकेशन @github.com
लिखा था:

@Akryum https://github.com/akryum धन्यवाद। बड़ा, अधिक टेम्पलेट भारी
JSX के साथ func घटक बेहतर हो सकते हैं क्योंकि मानक रेंडर
कार्य चीजों को पढ़ने में थोड़ा कठिन बना देंगे। एक अधिक उन्नत ट्यूटोरियल
इन पर वास्तव में मीठा होगा :)

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 , या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka कुछ करने के लिए आप किसी फ़ंक्शन का उपयोग कैसे करेंगे? उदाहरण के लिए एक चार्ट को तुरंत चालू करें?

जब तक आप एक चार्ट को पूरी तरह से vnodes के साथ प्रस्तुत नहीं कर रहे हैं, आपको इसकी आवश्यकता होगी a
ऐसा करने के लिए जीवनचक्र विधियों के साथ नियमित घटक

शुक्र, ५ जनवरी, २०१८ को सुबह ५:४१ बजे, डोब्रोमिर ह्रिस्तोव नोटिफिकेशन @github.com
लिखा था:

@blocka https://github.com/blocka करने के लिए आप किसी फ़ंक्शन का उपयोग कैसे करेंगे
कुछ? उदाहरण के लिए एक चार्ट को तुरंत चालू करें?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 , या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum आपका समाधान काम करता है लेकिन यह मुझे यह महसूस कराता है कि कार्यात्मक sfc टेम्पलेट थोड़ा और प्यार का उपयोग कर सकते हैं। मैं कई घटकों को फिर से लिखने की प्रक्रिया में हूं जो कि गेट-गो से कार्यात्मक हो सकते थे और मैं अनुभव से थोड़ा निराश हूं। एसएफसी में पहले से ही एक संदर्भ है जो props और listeners लिए टेम्पलेट से पहुंच योग्य है। क्या इन गुणों को केवल प्रॉप्स के लिए 'रूट' और श्रोताओं के लिए '$emit' में मैप नहीं किया जा सकता है, जिससे प्रत्येक प्रकार के sfc को एक ही एपीआई के साथ काम करने की अनुमति मिलती है।

<template functional>
    <div @click="listeners['request-something'](42)">
        {{props.hello}}
        {{props.world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>

बन सकता है

<template functional>
    <div @click="$emit('request-something', 42)">
        {{hello}}
        {{world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>