Vue: [2.0] Шаблоны для функциональных компонентов

У нас уже есть такая возможность в нашей дорожной карте. Однако мы отложим это до тех пор, пока 2.0 не выйдет из текущей фазы после выпуска, и вся работа, которую мы оставили в экосистеме для 2.0, будет завершена, потому что это потребует значительного объема работы, чтобы получить правильные, протестированные и т. Д. (Также , заставляя vue-loader / vueify работать с ним и т. д. стр.)

Спасибо за PoC, кажется полезным!

Да, пожалуйста.
Я смотрел именно на это. Для меня функции рендеринга слишком сложны и "кажутся" отделенными от общего ощущения одиночного файлового компонента.

Что было бы наиболее полезно для меня, так это охват css функциональными компонентами.

Можем ли мы получить обновление статуса этого функционального однофайлового компонента? Я прихожу из 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 Вы знаете статус этой проблемы? Похоже, он уже несколько месяцев находится в подвешенном состоянии. Что мы можем сделать, чтобы продвинуться вперед?

/ пинг @ блейк-ньюман

Есть какие-нибудь новости об этой функции?

Кажется, работа над этим началась в феврале: 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 и горячей перезагрузки функциональных компонентов :)

Можно ли испускать $ из функциональных компонентов?

Если я не ошибаюсь, краткий ответ - нет. Функциональный компонент не является экземпляром и поэтому не имеет методов.

Я считаю, что с помощью какого-то взлома вы действительно можете испускать. Объект контекста, который получает функция рендеринга, содержит parent который всегда должен быть экземпляром vue. Вы можете выбрать context.parent.$emit() или context.parent.$root.$emit() чтобы применить более глобальный подход. Как видите, это не событие, генерируемое функциональным компонентом, поэтому, в зависимости от вашего варианта использования, это, вероятно, не лучшее решение.

Привет, я занимался оптимизацией некоторых элементов нашей панели инструментов и чтобы функциональность компонента SFC звучала потрясающе, но у меня не будет там никаких методов или вычисляемых свойств, верно?
Если я использую функцию рендеринга или JSX, я могу, по крайней мере, определить их внутри самой функции рендеринга, правильно?

Можно ли испускать $ из функциональных компонентов?

Вы можете получить доступ к объекту listeners в функциональном контексте . Например:

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

Вызов слушателя как метод внутри my-functional-component :

listeners['request-something'](42)

Если я использую функцию рендеринга или JSX, я могу, по крайней мере, определить их внутри самой функции рендеринга, правильно?

да.

@ Акрюм, спасибо. Более крупные и тяжелые для шаблонов компоненты func могут быть лучше с JSX, потому что стандартные функции рендеринга сделают чтение немного сложнее. Было бы очень приятно получить более продвинутый учебник по ним :)

вам больше не нужно использовать функцию рендеринга с функциональными компонентами.
Вы можете использовать шаблоны

Пятница, 5 января 2018 г., 4:53, Добромир Христов [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, Добромир Христов [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 props и listeners . Нельзя просто сопоставить эти свойства с «корнем» для props и «$ emit» для слушателей, позволяя каждому типу sfc работать с одним и тем же api.

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