Vue: [2.0] Modèles de composants fonctionnels

Nous l'avons déjà en option sur notre feuille de route. Cependant, nous reporterons cela jusqu'à ce que la version 2.0 soit sortie de la phase actuelle de post-publication et que tout le travail qu'il nous reste dans l'écosystème pour la 2.0 soit terminé, car cela impliquera une quantité considérable de travail pour bien faire, tester et ainsi de suite (également , faire fonctionner vue-loader/vueify avec etc. pp.)

Merci pour le PoC, ça semble utile !

Oui s'il vous plaît.
Je regardais exactement ça. Pour moi, les fonctions de rendu sont trop écrasantes et "semblent" disjointes de la sensation globale d'un composant à fichier unique.

Ce qui me serait le plus utile serait d'étendre le CSS aux composants fonctionnels.

Pouvons-nous obtenir une mise à jour sur ce composant de fichier unique fonctionnel ? Je viens de React et cela manque un peu.

C'est pour bientôt.

Quelqu'un peut-il expliquer pour un n00b ce qui est nouveau avec cela par rapport à ce que nous avons maintenant?

Vous pourrez créer des composants fonctionnels avec des fichiers .vue comme ceci :

<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>

Ah d'accord merci !!

Cela a l'air super. Une idée du calendrier de sortie de cette fonctionnalité ?

Cela va rendre les composants fonctionnels tellement plus faciles à utiliser !

des mises à jour sur ce sujet ? fera-t-il partie de la version 2.3 ?

@Akryum Connaissez-vous l'état de ce problème ? On dirait que c'est dans les limbes depuis des mois. Y a-t-il quelque chose que nous puissions faire pour aider à faire avancer cela?

/ping @blake-newman

Y a-t-il des nouvelles de cette fonctionnalité ?

Il semble que le travail ait commencé à ce sujet en février : https://github.com/vuejs/vue/tree/feature/fn-templates

Y a-t-il une mise à jour à ce sujet ? Il est ouvert depuis un certain temps maintenant - y a-t-il quelque chose qui puisse être fait pour aider à résoudre ce problème ?

@Akryum depuis votre teaser en février, cela semble mort dans l'eau. @blake-newman Je vois que vous avez été cinglé il y a quelques mois, avez-vous des informations sur ce problème ?

Je suis désolé si cela devient ennuyeux, j'aimerais vraiment savoir comment nous pouvons y arriver :)

@scottbedard J'y travaillais, il y avait quelques pièges cachés. Cependant, ceux-ci pourraient simplement être documentés comme des fonctionnalités inutilisables. Le travail a été fait il y a un certain temps et malheureusement ne correspond pas à l'état actuel du système de rendu, donc du travail devra être fait.

@vuejs/collaborators Quel est votre avis sur cette fonctionnalité dans son ensemble, l'effort de développement et le coût supplémentaire pour le noyau valent-ils cette fonctionnalité ?

Je pense que si c'est une fonctionnalité intéressante, car la façon par défaut d'écrire des composants utilise les modèles. Et à mon humble avis, découpler toutes les fonctions de rendu des composants (utilisés dans le compilateur de modèles) serait formidable.

Le problème est que la portée de l'utilisation fonctionnelle des modèles est limitée, bien plus que l'utilisation des fonctions JSX/Render. UNE

Je pense qu'au moment de construire des composants fonctionnels, les contraintes et les modèles de conception ne correspondent pas à un modèle de modèle. Cette fonctionnalité nécessite une petite quantité de temps d'exécution supplémentaire (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) et n'aura jamais les mêmes performances que les fonctions de rendu pures.

L'activation de cette fonctionnalité supposera de meilleures performances, comparativement aux fonctions de rendu pures, ce n'est pas vrai. Ma position sur la fonctionnalité pour le moment est qu'elle permettra uniquement aux modèles d'être utilisés, mais ne donnera aucune véritable récompense.

De plus, il serait bien d'avoir un support de style étendu pour les composants fonctionnels, mais cela peut n'avoir aucun rapport.

Ce n'est pas lié, je crois que cela fonctionne. J'ai déjà travaillé dessus. A moins qu'il y ait une régression ?

Les composants fonctionnels de Vue sont légèrement moches par rapport à React. template beaucoup moins fonctionnel que jsx . Vous pouvez peut-être emprunter vue-loader pour le traitement de la conversion, espérons-le comme ceci :

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

export default DumbCmp;
</script>

en fait, certains gars ont fait ce serval il y a des mois https://github.com/nickmessing/babel-plugin-jsx-vue-functional

Est-ce ce que nous attendions ? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

Oui, Vue 2.5 + vue-loader 13.3 aura un support approprié pour la compilation de modèles, le CSS étendu et le rechargement à chaud pour les composants fonctionnels :)

Est-il possible d'émettre à partir de composants fonctionnels ?

Sauf erreur, la réponse courte est non. Un composant fonctionnel n'est pas une instance et n'a donc pas de méthodes.

Grâce à un piratage, je pense que vous pouvez réellement émettre. L'objet de contexte que le render fn reçoit contient un parent qui devrait toujours être une instance de vue. Vous pouvez choisir entre context.parent.$emit() ou context.parent.$root.$emit() pour adopter une approche plus globale. Comme vous pouvez le voir, il ne s'agit pas d'un événement émis par le composant fonctionnel, donc selon votre cas d'utilisation, ce n'est probablement pas la meilleure solution.

Hé, je cherchais à optimiser certains de nos éléments de tableau de bord et à rendre fonctionnel un composant SFC, mais je ne pourrai pas y avoir de méthodes ou d'accessoires calculés, n'est-ce pas ?
Si j'utilise une fonction de rendu ou JSX, je peux au moins définir ceux à l'intérieur de la fonction de rendu elle-même, n'est-ce pas ?

Est-il possible d'émettre à partir de composants fonctionnels ?

Vous pouvez accéder à l'objet listeners sur le contexte fonctionnel . Par exemple:

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

Appelez l'écouteur comme une méthode dans my-functional-component :

listeners['request-something'](42)

Si j'utilise une fonction de rendu ou JSX, je peux au moins définir ceux à l'intérieur de la fonction de rendu elle-même, n'est-ce pas ?

Oui.

@Akryum merci. Des composants de fonction plus gros et plus lourds pourraient être mieux avec JSX car les fonctions de rendu standard rendraient les choses un peu plus difficiles à lire. Un tutoriel plus avancé sur ceux-ci serait vraiment sympa :)

vous n'avez plus besoin d'utiliser une fonction de rendu avec des composants fonctionnels.
Vous pouvez utiliser des modèles

Le vendredi 5 janvier 2018 à 04h53, Dobromir Hristov [email protected]
a écrit:

@Akryum https://github.com/akryum merci. Plus grand, plus lourd de modèles
les composants func pourraient être mieux avec JSX car le rendu standard
fonctions rendraient les choses un peu plus difficiles à lire. Un tutoriel plus avancé
sur ceux-ci serait vraiment adorable :)

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 , ou couper le son
le fil
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka comment utiliserez-vous une fonction pour faire quelque chose ? instancier un graphique par exemple ?

à moins que vous ne rendiez complètement un graphique avec des nœuds virtuels, vous auriez besoin d'un
composant régulier avec des méthodes de cycle de vie pour le faire

Le vendredi 5 janvier 2018 à 5h41, Dobromir Hristov [email protected]
a écrit:

@blocka https://github.com/blocka comment allez-vous utiliser une fonction pour faire
quelque chose? instancier un graphique par exemple ?

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 , ou couper le son
le fil
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum Votre solution fonctionne mais cela me laisse le sentiment que les modèles sfc fonctionnels pourraient utiliser un peu plus d'amour. Je suis en train de réécrire plusieurs composants qui auraient pu être fonctionnels dès le départ et je suis un peu déçu de l'expérience. Le sfc a déjà un contexte accessible depuis le modèle pour props et listeners . Ces propriétés ne pourraient-elles pas simplement être mappées sur la 'racine' pour les props et '$emit' pour les écouteurs permettant à chaque type de sfc de fonctionner avec la même api.

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

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

pourrait devenir

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

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