{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"1. Разбивай большие компоненты на мелкие"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чем больше шаблон у одного компонента, тем больше он перерисовывается при любом изменении состояния."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Идея:"},{"type":"hardBreak"},{"type":"text","text":"логика → делим на подкомпоненты, чтобы менялся только нужный кусок дерева."}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n \n \n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"2. Следи за зависимостями в "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":" и шаблоне"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue перерисует компонент, если затронуты "},{"type":"text","marks":[{"type":"bold"}],"text":"любой"},{"type":"text","text":" из реактивных зависимостей."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не пихай в "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":" лишние данные"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не передавай в компонент большие объекты, если ему нужны 1–2 поля"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не используй в шаблоне реактивное, что не нужно для рендера"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плохо:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":" \n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Лучше:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"3. Используй "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":", а не методы в шаблоне"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Метод в шаблоне вызывается "},{"type":"text","marks":[{"type":"bold"}],"text":"каждый рендер"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n

\n\nmethods: {\n fullName() { return this.first + ' ' + this.last }\n}\n"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n

\n\ncomputed: {\n fullName() { return this.first + ' ' + this.last }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":" кэшируется, пока не изменились зависимости."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"4. Избегай создания новых объектов/массивов прямо в шаблоне"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый рендер → новый объект/массив → Vue считает, что проп изменился → лишние обновления."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плохо:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Лучше:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"data() {\n return {\n options: { color: 'red' },\n items: [1, 2, 3]\n }\n}\n"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"5. Используй "},{"type":"text","marks":[{"type":"code"}],"text":"v-once"},{"type":"text","text":" для статического контента"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если кусок DOM "},{"type":"text","marks":[{"type":"bold"}],"text":"никогда"},{"type":"text","text":" не меняется:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"

Статический заголовок

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue вообще не будет его трогать после первого рендера."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"6. В Vue 3 — "},{"type":"text","marks":[{"type":"code"}],"text":"v-memo"},{"type":"text","text":" для частично статических блоков"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Позволяет мемоизировать фрагмент шаблона:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"

\n \n {{ heavyComputed }}\n

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"7. Аккуратно с "},{"type":"text","marks":[{"type":"code"}],"text":"watch"},{"type":"text","text":" и глубокими объектами"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"watch(obj, ..., { deep: true })"},{"type":"text","text":" может приводить к "},{"type":"text","marks":[{"type":"bold"}],"text":"массовым"},{"type":"text","text":" перерендерингам."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"старайся watch-ить "},{"type":"text","marks":[{"type":"bold"}],"text":"конкретные поля"},{"type":"text","text":", а не весь объект"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"если нужно просто вычислить значение → используй "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":", а не "},{"type":"text","marks":[{"type":"code"}],"text":"watch"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"8. Используй "},{"type":"text","marks":[{"type":"code"}],"text":"shallowRef"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"shallowReactive"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"markRaw"},{"type":"text","text":" для тяжёлых структур"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если у тебя большая структура, которую "},{"type":"text","marks":[{"type":"bold"}],"text":"не надо"},{"type":"text","text":" глубоко отслеживать:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"import { shallowRef, markRaw } from 'vue'\n\nconst chart = shallowRef(null)\n// или\nconst instance = markRaw(new SomeHeavyClass())\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это уменьшает количество реактивных триггеров."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"9. В списках ("},{"type":"text","marks":[{"type":"code"}],"text":"v-for"},{"type":"text","text":") — всегда правильный "},{"type":"text","marks":[{"type":"code"}],"text":":key"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Правильный ключ позволяет Vue "},{"type":"text","marks":[{"type":"bold"}],"text":"переиспользовать"},{"type":"text","text":" DOM-элементы, а не рендерить всё заново."}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плохие ключи ("},{"type":"text","marks":[{"type":"code"}],"text":"index"},{"type":"text","text":") → лишние перерендеры и перестройки DOM."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"10. Не хранить всё в глобальном сторе “на всякий случай”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Глобальное состояние → больше компонентов завязано → любое изменение триггерит больше обновлений."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"то, что может быть "},{"type":"text","marks":[{"type":"bold"}],"text":"локальным"},{"type":"text","text":", держи "},{"type":"text","marks":[{"type":"bold"}],"text":"локально"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"стор — только для действительно общих данных"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"11. Дебаунс/троттлинг инпутов и событий"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Много обновлений = много перерендеров."}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const onInput = debounce((value) => {\n searchQuery.value = value\n}, 300)\n"}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как уменьшить количество перерендеров?

Комментарии