Pull to refresh

Comments 7

3 и 4 способы ещё можно понять, но вот 1, 2 и 5 — это ж просто документация.

БЫСТРАЯ ПРАВКА: Поскольку это functional компонент, его контекст не существует, поэтому для доступа к props необходимо применить props.name — спасибо Динешу Мадханлалу за упоминание

Примечание: в версиях до 2.3.0 опция props необходима, если вы хотите использовать входные параметры в функциональном компоненте. С версии 2.3.0 и выше вы можете опустить опцию props и все атрибуты, найденные на узле компонента, будут неявно извлечены в качестве входных данных.
Выбрали плохую статью и сделали плохой перевод :(

Это предложение вообще за гранью:
К счастью, Vue настолько удивителен, что он достаточно умен, чтобы понимать, что никакая функция, вызываемая самостоятельно, не должна вызываться до тех пор, пока не сработает событие, к которому она присоединена, поэтому даже если это IIF, Vue делает ее thunk, что задерживает выполнение.


Четвертый способ полная глупость.
Что здесь происходит так это то, что каждый раз, когда div увеличивается в длине (например прогрессбар), все кнопки также будут перерисовываться.

Кнопки не будут перерисовываться, если их ключ не изменился. У них только изменится листенер на событие клика.

  <button @click="() => $logger.log('lol')">Test</button>
  <button @click="$logger.log('lol')">Test</button>

Автор утверждает (хотя тяжело понять в тексте что он там на самом деле утверждает), что во втором случае не будет создаваться новая функция при ререндере, но это не так, так как все в итоге будет скомпилировано vue-template-compiler'ом в это:

_c(
  "button",
  {
    key: i,
    on: {
      click: function() {
        return _vm.$logger.log("lol")
      }
    }
  },
  [_vm._v("Test")]
)

Т.е. новая функция будет все-равно создаваться при ререндере. Оптимизации внутри шаблонов обещают только во Vue 3 версии.

Первый совет не просто самый сложный, но ещё и самый вредный, потому что добавление ключевого слова functional в ваш шаблон несёт за собой очень много побочных эффектов, о которых вы можете даже и не догадываться.


Например, вы полностью лишаетесь автоматического пробрасывания атрибутов в рутовый элемент и эту логику вам придётся реализовывать самому. Простого v-bind="$attrs" здесь не хватит, потому что у Vue есть два типа классов в data: class и staticClass, оба из которых нужно прокидывать. Так же вы лишены возможности использовать другие компоненты внутри функционального компонента как раньше, для этого вам придётся использовать пропы или inject с дефолтными значениями.


Для таких компонентов как в первом примере, который просто отображает данные из пропов я бы посоветовал использовать v-once, если вы на все 100% уверены что этот компонент не будет изменяться.


С приходом Vue 3 нам обещают оверхед stateful компонентов на уровне функциональных, а писать функциональные компоненты, чтобы потом от них избавляться это очень дорого. Поэтому применяйте их только в тех случаях когда у вас рендерятся сотни и тысячи таких компонентов, в таком случае выигрыш по производительности обоснует поддержку этого кода.

Два года в vuejs. Начинал с первой версии. Я три с половиной года назад писал spa на второй версии. Или у товарища так себе с актуализацией технологии, или статья морально устарела.
Такой сложный язык! У меня мозг вкипел от перлов:
Этот будет немного более очевиден для большинства

создается новый экземпляр анонимной функции, и алгоритм сравнения выбирает его как новый объект и, следовательно, повторно отображает кнопки даже если это не нужно.

Этот такой же простой, относительно него есть серые зоны, и это не общее решение.

Я надеюсь, что это помогло вам всем!

«Это» помогло.
Переводчик, тебе не жалко людей, которые это читают?
Переведи это на русский либо оставь на английском. Гугл транслейт, полагаю, тут все умеют.
Сочувствую всем, кто проходит ваши «Авторские онлайн‑курсы для профессионалов»
Добрый день. Благодарим за комментарий, учтем на будущее и обязательно проведем беседу с переводчиком на тему «сложности языка». Что касается курсов, мне кажется, довольно странно делать выводы о курсах по статье в блоге…

Я хоть и пишу на чью чуть больше 3х лет, но из этого перевода вообще ничего понять не смог. Каждое предложение по нескольку раз перечитывал, но так местами и не понял, о чем речь. Про функциональный компонент например вообще не понятно.

Sign up to leave a comment.