Vue: [2.0] قوالب للمكونات الوظيفية

لدينا هذا بالفعل كخيار في خريطة الطريق الخاصة بنا. ومع ذلك ، سنقوم بتأجيل هذا الأمر حتى يخرج الإصدار 2.0 من مرحلة ما بعد الإصدار الحالية ويتم الانتهاء من جميع الأعمال التي تركناها في النظام البيئي لـ 2.0 ، لأن هذا سيتضمن قدرًا كبيرًا من العمل للإنجاز الصحيح والاختبار وما إلى ذلك (أيضًا ، مما يجعل vue-loader / vueify يعمل معه وما إلى ذلك ص.)

شكرًا على PoC ، يبدو مفيدًا!

نعم من فضلك.
كنت أنظر إلى ذلك بالضبط. بالنسبة لي ، فإن وظائف التصيير مربكة للغاية و "تشعر" بأنها مفككة عن المظهر العام لمكون الملف الفردي.

ما سيكون أكثر فائدة بالنسبة لي هو تحديد نطاق المغلق للمكونات الوظيفية.

هل يمكننا الحصول على تحديث حالة على مكون الملف الفردي الوظيفي هذا؟ أنا قادم من React وأفتقد هذا قليلاً.

قريبا.

يمكن لأي شخص أن يشرح ل 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 هل تعرف حالة هذه القضية؟ يبدو أنه كان في طي النسيان لعدة أشهر. هل هناك أي شيء يمكننا القيام به للمساعدة في المضي قدمًا؟

/ ping @ بليك نيومان

هل هناك أي أخبار عن هذه الميزة؟

يبدو أن العمل قد بدأ في هذا في فبراير: https://github.com/vuejs/vue/tree/feature/fn-templates

هل هناك أي تحديث على ذلك؟ لقد كان مفتوحًا منذ فترة - هل هناك أي شيء يمكن القيام به للمساعدة في حل هذه المشكلة؟

Akryum منذ الإعلان التشويقي الخاص بك في فبراير ، بدا هذا ميتًا في الماء. @ blake-newman أرى أنك تعرضت لضغوط قبل بضعة أشهر ، هل لديك أي معلومات حول هذه المشكلة؟

أنا آسف إذا كان هذا مزعجًا ، أود حقًا أن أعرف كيف يمكننا تحقيق ذلك :)

scottbedard كنت أعمل على ذلك ، كان هناك عدد قليل من المشاكل الخفية. ومع ذلك ، يمكن توثيقها على أنها ميزات غير قابلة للاستخدام. تم الانتهاء من العمل منذ فترة طويلة ، وللأسف لا يتم تعيينه إلى الحالة الحالية لنظام العرض ، لذا يجب القيام بالعمل.

@ vuejs / المتعاونون ما رأيك في هذه الميزة بشكل عام ، هل جهود التطوير والتكلفة الإضافية للجوهر تستحق هذه الميزة؟

أعتقد أنه من الجيد أن يكون لديك ميزة ، لأن الطريقة الافتراضية لكتابة المكونات هي استخدام القوالب. وسيكون فصل IMHO عن جميع وظائف التقديم من المكونات (المستخدمة في مترجم القوالب) أمرًا رائعًا.

تكمن المشكلة في أن نطاق استخدام القوالب وظيفيًا محدود ، أكثر بكثير من استخدام وظائف JSX / Render. أ

أعتقد أنه عند نقطة بناء المكونات الوظيفية ، فإن القيود وأنماط التصميم لا تتناسب مع نموذج القالب. تتطلب هذه الميزة مقدارًا صغيرًا من وقت التشغيل الإضافي (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) ولن يكون لها أبدًا نفس أداء وظائف العرض الخالصة.

سوف يفترض تمكين هذه الميزة أداءً أفضل ، مقارنةً بوظائف العرض الخالصة ، وهذا ليس صحيحًا. موقفي من الميزة في الوقت الحالي ، هو أنها ستعمل على تمكين القوالب فقط لاستخدام وظائفها ولكنها لا تعطي مكافأة حقيقية.

أيضًا ، سيكون من الجيد أن يكون لديك دعم نمط النطاق للمكونات الوظيفية ولكن قد يكون غير مرتبط.

هذا لا علاقة له ، أعتقد أن هذا يعمل. لقد عملت على ذلك من قبل. ما لم يكن هناك تراجع؟

المكونات الوظيفية لـ Vue قبيحة بعض الشيء مقارنة بـ React. template أقل وظيفية بكثير من jsx . ربما يمكنك استعارة 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() لاتخاذ نهج أكثر شمولية. كما ترى ، هذا ليس حدثًا ينبعث من المكون الوظيفي ، لذلك اعتمادًا على حالة الاستخدام الخاصة بك ، من المحتمل ألا يكون هذا هو الحل الأفضل.

مرحبًا ، كنت أبحث في تحسين بعض عناصر لوحة التحكم لدينا وجعل أحد مكونات SFC الوظيفية تبدو رائعة ، لكنني لن أتمكن من الحصول على أي طرق أو دعامات محسوبة هناك ، أليس كذلك؟
إذا استخدمت دالة تصيير أو JSX ، يمكنني على الأقل تحديد تلك الموجودة داخل دالة العرض it self ، هل هذا صحيح؟

هل من الممكن انبعاث $ من المكونات الوظيفية؟

يمكنك الوصول إلى الكائن listeners في السياق الوظيفي . على سبيل المثال:

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

اتصل بالمستمع كطريقة داخل my-functional-component :

listeners['request-something'](42)

إذا استخدمت دالة تصيير أو JSX ، يمكنني على الأقل تحديد تلك الموجودة داخل دالة العرض it self ، هل هذا صحيح؟

نعم فعلا.

@ أكريوم شكرا. قد تكون مكونات func الأكبر حجمًا والأكثر ثقيلة في وضع أفضل مع JSX لأن وظائف العرض القياسية ستجعل قراءة الأشياء أكثر صعوبة. سيكون البرنامج التعليمي الأكثر تقدمًا حول هذه الأشياء رائعًا حقًا :)

لا تحتاج إلى استخدام وظيفة تصيير مع مكونات وظيفية بعد الآن.
يمكنك استخدام القوالب

يوم الجمعة 5 يناير 2018 الساعة 4:53 صباحًا ، Dobromir Hristov [email protected]
كتب:

Akryum https://github.com/akryum شكرا. أكبر ، قالب ثقيل أكثر
قد تكون مكونات func أفضل حالًا مع JSX لأن العرض القياسي
وظائف تجعل قراءة الأشياء أصعب قليلاً. برنامج تعليمي أكثر تقدمًا
على هذه ستكون جميلة حقًا :)

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 ، أو كتم الصوت
الخيط
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

blocka كيف ستستخدم دالة للقيام بشيء ما؟ إنشاء رسم بياني على سبيل المثال؟

ما لم تكن تقدم مخططًا بالكامل باستخدام vnodes ، فستحتاج إلى ملف
مكون عادي مع طرق دورة الحياة للقيام بذلك

يوم الجمعة 5 يناير 2018 الساعة 5:41 صباحًا ، Dobromir Hristov [email protected]
كتب:

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 الوظيفية يمكن أن تستخدم المزيد من الحب. أنا بصدد إعادة كتابة العديد من المكونات التي كان من الممكن أن تعمل منذ البداية وأنا محبط قليلاً من التجربة. يحتوي 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>