Vue: [2.0] Modelos para componentes funcionais

Já temos isso como uma opção em nosso roteiro. No entanto, vamos adiar isso até que 2.0 esteja fora da fase de pós-lançamento atual e todo o trabalho que resta no ecossistema para 2.0 esteja feito, porque isso envolverá uma quantidade considerável de trabalho para acertar, testar e assim por diante (também , fazendo vue-loader / vueify funcionar com ele, etc. pp.)

Obrigado pelo PoC, parece útil!

Sim por favor.
Eu estava olhando exatamente para isso. Para mim, as funções de renderização são muito opressivas e "parecem" separadas da sensação geral de um único componente de arquivo.

O que seria mais útil para mim seria o escopo do CSS em componentes funcionais.

Podemos obter uma atualização de status neste componente de arquivo único funcional? Venho do React e sinto uma certa falta disso.

Em breve.

Alguém pode explicar para um n00b o que há de novo nisso em comparação com o que temos agora?

Você será capaz de criar componentes funcionais com .vue arquivos 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 obrigado !!

Isso parece ótimo. Alguma ideia do prazo para o lançamento desse recurso?

Isso tornará os componentes funcionais muito mais fáceis de usar!

alguma atualização neste tópico? fará parte da versão 2.3?

@Akryum Você conhece a situação desse problema? Parece que está no limbo há meses. Há algo que possamos fazer para ajudar a levar isso adiante?

/ ping @ blake-newman

Há alguma notícia sobre esse recurso?

Parece que o trabalho foi iniciado em fevereiro: https://github.com/vuejs/vue/tree/feature/fn-templates

Existe alguma atualização sobre isso? Já está aberto há algum tempo - há algo que pode ser feito para ajudar a resolver este problema?

@Akryum desde seu teaser em fevereiro, isso parecia morto na água. @blake-newman Vejo que você recebeu um ping há alguns meses. Você tem alguma informação sobre esse problema?

Sinto muito se isso está ficando chato, eu realmente gostaria de saber como podemos fazer isso acontecer :)

@scottbedard Eu estava trabalhando nisso, havia alguns truques ocultos. No entanto, eles podem ser documentados como recursos inutilizáveis. O trabalho foi feito há um bom tempo e, infelizmente, não mapeia para o estado atual do sistema de renderização, portanto, o trabalho precisará ser feito.

@ vuejs / colaboradores Qual é a sua opinião sobre esse recurso em geral, o esforço de desenvolvimento e o custo adicional para o núcleo valem esse recurso?

Acho que é bom ter um recurso, já que a maneira padrão de escrever componentes é usando os modelos. E IMHO desacoplar todas as funções de renderização dos componentes (usados ​​no compilador de modelos) seria ótimo.

O problema é que o escopo de usar modelos funcionalmente é limitante, muito mais do que usar funções JSX / Render. UMA

Eu acho que no ponto de construção de componentes funcionais, as restrições e padrões de design não se encaixam em um modelo de template. Este recurso requer uma pequena quantidade de tempo de execução extra (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) e nunca terá o mesmo desempenho que funções de renderização puras.

Ativar esse recurso irá assumir um melhor desempenho, em comparação com as funções de renderização pura, isso não é verdade. Minha posição sobre o recurso, no momento, é que apenas capacitará os modelos a serem usados ​​com funcionalidade, mas não oferece nenhuma recompensa real.

Além disso, seria bom ter suporte de estilo com escopo para componentes funcionais, mas pode não estar relacionado.

Isso não tem relação, acredito que está funcionando. Eu trabalhei nisso antes. A menos que haja uma regressão?

Os componentes funcionais do Vue são ligeiramente feios em comparação com o React. template muito menos funcional do que jsx . Talvez você possa emprestar vue-loader para o processamento de conversão, esperançosamente assim:

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

export default DumbCmp;
</script>

na verdade, alguns caras fizeram isso meses atrás https://github.com/nickmessing/babel-plugin-jsx-vue-functional

É isso que estávamos esperando? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

Sim, o Vue 2.5 + vue-loader 13.3 terá suporte adequado para compilação de modelos, CSS com escopo e hot-reload para componentes funcionais :)

É possível $ emitir de componentes funcionais?

A menos que eu esteja enganado, a resposta curta é não. Um componente funcional não é uma instância e, portanto, não possui métodos.

Por meio de algum hackery, acredito que você realmente pode emitir. O objeto de contexto que o render fn recebe contém um parent que deve ser sempre uma instância vue. Você pode escolher context.parent.$emit() ou context.parent.$root.$emit() para ter uma abordagem mais global. Como você pode ver, esta não é uma emissão de evento do componente funcional, portanto, dependendo do seu caso de uso, esta provavelmente não é a melhor solução.

Ei, eu estava pesquisando para otimizar alguns de nossos elementos do painel e fazer um componente SFC funcional parecer incrível, mas não poderei ter nenhum método ou adereços computados lá, certo?
Se eu usar uma função de renderização ou JSX, posso pelo menos definir aqueles dentro da própria função de renderização, correto?

É possível $ emitir de componentes funcionais?

Você pode acessar o objeto listeners no contexto funcional . Por exemplo:

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

Chame o ouvinte como um método dentro de my-functional-component :

listeners['request-something'](42)

Se eu usar uma função de renderização ou JSX, posso pelo menos definir aqueles dentro da própria função de renderização, correto?

sim.

Obrigado @Akryum . Componentes de função maiores e mais pesados ​​de template podem ficar melhores com JSX porque as funções de renderização padrão tornariam as coisas um pouco mais difíceis de ler. Um tutorial mais avançado sobre isso seria muito legal :)

você não precisa mais usar uma função de renderização com componentes funcionais.
Você pode usar modelos

Na sexta-feira, 5 de janeiro de 2018 às 4:53, Dobromir Hristov [email protected]
escreveu:

@Akryum https://github.com/akryum obrigado. Maior, mais pesado de modelo
os componentes da função podem ficar melhores com JSX porque a renderização padrão
funções tornariam as coisas um pouco mais difíceis de ler. Um tutorial mais avançado
sobre isso seria muito fofo :)

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka como você usará uma função para fazer algo? instanciar um gráfico, por exemplo?

a menos que você esteja renderizando um gráfico completamente com vnodes, você precisaria de um
componente regular com métodos de ciclo de vida para fazer isso

Na sexta-feira, 5 de janeiro de 2018 às 5h41, Dobromir Hristov [email protected]
escreveu:

@blocka https://github.com/blocka como você usará uma função para fazer
algo? instanciar um gráfico, por exemplo?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum Sua solução funciona, mas me deixa com a sensação de que modelos sfc funcionais precisam de um pouco mais de amor. Estou no processo de reescrever vários componentes que poderiam ter funcionado desde o início e estou um pouco decepcionado com a experiência. O sfc já tem um contexto acessível a partir do modelo para props e listeners . Essas propriedades não poderiam ser mapeadas para a 'raiz' para props e '$ emit' para ouvintes, permitindo que cada tipo de sfc funcione com a mesma API.

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

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

poderia se tornar

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

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