Vue: [2.0] Plantillas para componentes funcionales

Ya tenemos esto como una opción en nuestra hoja de ruta. Sin embargo, pospondremos esto hasta que 2.0 esté fuera de la fase de post-lanzamiento actual y todo el trabajo que nos queda en el ecosistema para 2.0 esté hecho, porque esto implicará una cantidad considerable de trabajo para hacerlo bien, probarlo y así sucesivamente (también , haciendo que vue-loader / vueify funcione con él, etc. pp.)

Gracias por el PoC, ¡parece útil!

Sí, por favor.
Estaba mirando exactamente eso. Para mí, las funciones de renderización son demasiado abrumadoras y "se sienten" desarticuladas de la sensación general del componente de un solo archivo.

Lo que me resultaría más útil sería aplicar css a los componentes funcionales.

¿Podemos obtener una actualización del estado de este componente funcional de archivo único? Vengo de React y me estoy perdiendo un poco de esto.

Viene pronto.

¿Alguien puede explicar para un n00b qué es nuevo con esto en comparación con lo que tenemos ahora?

Podrá crear componentes funcionales con archivos .vue como este:

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

Ahh ok gracias !!

Eso se ve genial. ¿Alguna idea del plazo para el lanzamiento de esta función?

¡Esto hará que los componentes funcionales sean mucho más fáciles de usar!

alguna actualización sobre este tema? ¿Será parte de la versión 2.3?

@Akryum ¿Conoce el estado de este problema? Parece que ha estado en el limbo durante meses. ¿Hay algo que podamos hacer para ayudar a que esto avance?

/ ping @ blake-newman

¿Hay novedades sobre esta función?

Parece que se comenzó a trabajar en esto en febrero: https://github.com/vuejs/vue/tree/feature/fn-templates

¿Hay alguna actualización sobre esto? Ha estado abierto un tiempo, ¿hay algo que se pueda hacer para ayudar a mover este problema?

@Akryum desde su teaser en febrero, esto ha parecido muerto en el agua. @ blake-newman Veo que te hicieron ping hace unos meses, ¿tienes alguna información sobre este tema?

Lo siento si esto se está poniendo molesto, realmente me gustaría saber cómo podemos hacer que esto suceda :)

@scottbedard Estaba trabajando en eso, había algunos errores ocultos. Sin embargo, estos podrían simplemente documentarse como características inutilizables. El trabajo se realizó hace bastante tiempo y, lamentablemente, no se corresponde con el estado actual del sistema de renderizado, por lo que habrá que trabajar.

@ vuejs / colaboradores ¿Cuál es su opinión sobre esta función en general? ¿Vale la pena el esfuerzo de desarrollo y el costo adicional para el núcleo de esta función?

Creo que es bueno tener una característica, ya que la forma predeterminada de escribir componentes es usar las plantillas. Y en mi humilde opinión, desacoplar todas las funciones de representación de los componentes (utilizados en el compilador de plantillas) sería genial.

El problema es que el alcance de usar plantillas funcionalmente es limitante, mucho más que usar funciones JSX / Render. A

Creo que en el momento de construir componentes funcionales, las restricciones y los patrones de diseño no se ajustan a un modelo de plantilla. Esta función requiere una pequeña cantidad de tiempo de ejecución adicional (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) y nunca tendrá el mismo rendimiento que las funciones de renderizado puro.

Habilitar esta función supondrá un mejor rendimiento, en comparación con las funciones de renderizado puro, esto no es cierto. Mi postura sobre la función en este momento es que solo permitirá que las plantillas se utilicen como funcionalidad, pero no ofrece una verdadera recompensa.

Además, sería bueno tener soporte de estilo de alcance para componentes funcionales, pero puede no estar relacionado.

Eso no está relacionado, creo que está funcionando. Trabajé en eso antes. ¿A menos que haya una regresión?

Los componentes funcionales de Vue son un poco feos en comparación con React. template mucho menos funcional que jsx . Quizás puedas pedir prestado vue-loader para el procesamiento de conversiones, con suerte así:

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

export default DumbCmp;
</script>

de hecho, algunos chicos han hecho este servicio hace meses https://github.com/nickmessing/babel-plugin-jsx-vue-functional

¿Es esto lo que hemos estado esperando? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

Sí, Vue 2.5 + vue-loader 13.3 tendrá el soporte adecuado para la compilación de plantillas, CSS con alcance y recarga en caliente para componentes funcionales :)

¿Es posible $ emitir desde componentes funcionales?

A menos que me equivoque, la respuesta corta es no. Un componente funcional no es una instancia y, por lo tanto, no tiene métodos.

A través de alguna piratería, creo que realmente puedes emitir. El objeto de contexto que recibe el render fn contiene un parent que siempre debe ser una instancia de vue. Puede elegir context.parent.$emit() o context.parent.$root.$emit() para adoptar un enfoque más global. Como puede ver, esto no es un evento que emite el componente funcional, por lo que, dependiendo de su caso de uso, es probable que esta no sea la mejor solución.

Oye, estaba investigando para optimizar algunos de los elementos de nuestro tablero y hacer que un componente SFC funcional suene increíble, pero no podré tener ningún método o utilería computada allí, ¿verdad?
Si uso una función de renderizado o JSX, al menos puedo definir los que están dentro de la función de renderizado, ¿correcto?

¿Es posible $ emitir desde componentes funcionales?

Puede acceder al objeto listeners en el contexto funcional . Por ejemplo:

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

Llame al oyente como un método dentro de my-functional-component :

listeners['request-something'](42)

Si uso una función de renderizado o JSX, al menos puedo definir los que están dentro de la función de renderizado, ¿correcto?

Si.

@Akryum gracias. Los componentes func más grandes y pesados ​​en plantillas podrían estar mejor con JSX porque las funciones de render estándar harían las cosas un poco más difíciles de leer. Un tutorial más avanzado sobre estos sería realmente bueno :)

ya no es necesario utilizar una función de renderizado con componentes funcionales.
Puedes usar plantillas

El viernes 5 de enero de 2018 a las 4:53 a.m., Dobromir Hristov [email protected]
escribió:

@Akryum https://github.com/akryum gracias. Más grande, más plantilla pesada
Los componentes func podrían estar mejor con JSX porque el renderizado estándar
Las funciones harían las cosas un poco más difíciles de leer. Un tutorial más avanzado
en estos sería realmente dulce :)

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka ¿cómo

a menos que esté renderizando un gráfico completamente con vnodes, necesitaría un
componente regular con métodos de ciclo de vida para hacer eso

El viernes 5 de enero de 2018 a las 5:41 a. M., Dobromir Hristov [email protected]
escribió:

@blocka https://github.com/blocka ¿cómo usarás una función para hacer
¿alguna cosa? instanciar un gráfico, por ejemplo?

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum Su solución funciona, pero me deja con la sensación de que las plantillas funcionales sfc podrían necesitar un poco más de amor. Estoy en el proceso de reescribir varios componentes que podrían haber sido funcionales desde el principio y estoy un poco decepcionado con la experiencia. El sfc ya tiene un contexto al que se puede acceder desde la plantilla por props y listeners . ¿No podrían estas propiedades simplemente mapearse a la 'raíz' para accesorios y '$ emit' para oyentes permitiendo que cada tipo de sfc funcione con la misma api?

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

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

podría convertirse

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

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