Size: a a a

Nuxt.js — русскоговорящее сообщество

2020 April 22

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Arti
Если например сверху метод потом див и в нем стейт а потом снизу метод. То при изменении стейта методы запустятся, так ведь?
Простой пример:

  <Comp />
   <button @click="value++">click</button>
   {{value}}


При изменении value у тебя Comp перерендерится
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Хотя он вообще никак не связан с value
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
Stanislav Lashmanov
Простой пример:

  <Comp />
   <button @click="value++">click</button>
   {{value}}


При изменении value у тебя Comp перерендерится
будут выполнены все операции, который были в темплейте. Но тут есть хак в 2 вью
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
В этом случае, при изменении state запускаться будут как run1 так и run2. При большом компоненте это сказывается на fps
<template>
 <div>
   {{ run1() }}

   <div>{{ state }}</div>

   {{ run2() }}
 </div>
</template>


В этом примере, при изменении state не будут запускаться методы run1 and run2, так как пробросили через слот и явно указали template
<template>
 <div>
   {{ run1() }}

   <myComponent>
     <template #default>{{ state }}</template>
   </myComponent>

   {{ run2() }}
 </div>
</template>
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
но я почему то думал, что в 3 вью это подефолту будет.
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Arti
В этом случае, при изменении state запускаться будут как run1 так и run2. При большом компоненте это сказывается на fps
<template>
 <div>
   {{ run1() }}

   <div>{{ state }}</div>

   {{ run2() }}
 </div>
</template>


В этом примере, при изменении state не будут запускаться методы run1 and run2, так как пробросили через слот и явно указали template
<template>
 <div>
   {{ run1() }}

   <myComponent>
     <template #default>{{ state }}</template>
   </myComponent>

   {{ run2() }}
 </div>
</template>
Template это считай как другой компонент
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Но да, хак тоже норм
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Если позволяет сделать на слотах то так тоже будет норм, но я бы протестил это еще
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
Stanislav Lashmanov
Если позволяет сделать на слотах то так тоже будет норм, но я бы протестил это еще
У тебя же 3 вью сборка есть
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
проверь там
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
Но блин, я точно помню, что Эван хвастался тем, что это в 3 из коробки будет
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
У меня сейчас большой рефакторинг идет с рендер функций на нормальные  компоненты, чувствую наткнусь опять на проблемы с лишним рендером
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Arti
проверь там
Слоты не проверял, но вот мой пример выше там вызывает перерендер всего
источник

A

Arti in Nuxt.js — русскоговорящее сообщество
Stanislav Lashmanov
Слоты не проверял, но вот мой пример выше там вызывает перерендер всего
странно ...
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Я еще протестирую, скорее всего там пропы мешают сделать эту оптимизацию, но этой проблемы со статическими компонентами и так нет
источник

M

Max in Nuxt.js — русскоговорящее сообщество
Привет!
Есть пару вопросов к тем кто юзал https://github.com/nuxt-community/apollo-module
1) watchQuery запускается на ssr или только на клиенте? у меня при использовании ошибка в консоли (The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.)
2) В clientConfigs есть свойство default в котором описываются настройки для работы с клиентом, но так же там можно создать еще несколько шаблонов , например second и там свой эндпоинт описать. Как переключаться между этими шаблонами и использовать необходимый по ситуации?
В доке не нашел примеров.
источник

M

Max in Nuxt.js — русскоговорящее сообщество
+ и еще опция includeNodeModules
"In case you use *.gql files inside of node_module folder you can enable the graphql-tag/loader to parse the files for you."
что-то не понял про gql файлы которые используются в node_modules...
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Arti
странно ...
Да, зависит от пропсов, если есть динамический пропс то будет ре-рендер
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Статический пропс ре-рендер не вызовет
источник

SL

Stanislav Lashmanov in Nuxt.js — русскоговорящее сообщество
Даже если :prop="1"
источник