Я поделюсь с вами некоторыми советами и лучшими практиками, которые я изучил, работая с последней версией Vue, Vue3.
Говоря о интерфейсных фреймворках, я работал с некоторыми из них. Мне нравится изучать новые, чтобы узнать, как они работают и как все меняется с течением времени. В прошлом я провел некоторое время, играя и работая с Vue, и теперь появилась возможность возник, чтобы вернуться и работать с последней версией Vue 3, и с тех пор многому научился.
Ref против реактивного
Существует много дискуссий, и иногда может быть даже немного сложно и неясно знать, когда что использовать.
Из того, что я использую и нашел:
При работе с примитивами всегда используйте ref()(наиболее распространенные: логические, строковые и числовые) ,в то время как для работы с объектами используйте reactive().
Если вы хотите узнать больше, вы можете найти более подробное объяснение здесь: https://medium.com/@bsalwiczek/ref-vs-reactive-in-vue-3-whats-the-right-choice-7c6f7265ce39
Используйте :key в v-for
Что поможет нам всегда помнить об использовании :key=”” при работе с циклами в нашем шаблоне (html)
Предоставление ключа элемента помогает Vue, если ему нужно обновить компоненты внутри цикла. Ключ используется в качестве идентификатора, такого как идентификатор, и, конечно же, он знает, что у вас не должно быть дубликатов ключей.
Ключ всегда должен быть уникальным, никогда не забывайте об этом 🙄
Избегайте прямых манипуляций с DOM
При работе с Vue прямые манипуляции с DOM запрещены.
Вместо этого используйте этот подход с ссылками
Привязать стиль напрямую к состоянию/данным
Одна вещь, которая раньше была сложной, это то, что вы не могли напрямую привязываться к своему CSS с вашим состоянием. И угадай что? Теперь вы можете это сделать с появлением Vue 3, и во многих случаях это очень круто и полезно.
Вычисляемые функции
Как правило, вычисляемые функции в Vue действительно хороши, они кэшируются на основе их реактивных зависимостей, что делает их быстрее.
Учтите следующее: вы связываете один или несколько классов. Классы могут меняться при изменении состояния в вашем приложении.
Обычно мы делаем следующее слева, но справа мы преобразовали его в вычисляемую функцию.
Асинхронные компоненты
Асинхронные компоненты могут значительно ускорить ваше приложение, поскольку вы не засоряете основной пакет кодом, который вам обязательно нужен.
Самое приятное в асинхронных функциях то, что вы загружаете код, когда это нужно клиенту, и сводите ваш пакет JS к минимуму.
Вы можете найти более подробное объяснение здесь: https://vuejs.org/guide/components/async.html
V-deep для перезаписи стилей
Иногда вы можете столкнуться с тем, что используете сторонний пакет или компоненты, которые имеют собственный стиль.
И в этом случае вы можете использовать функциональность v-deep selector для перезаписи этих стилей.
Вы можете найти более подробное объяснение здесь: https://vuejs.org/api/sfc-css-features.html
Спасибо за чтение, и я надеюсь, что вам понравилось, и что это помогло лучше понять некоторые вещи о Vue 3.
Я также все еще учусь этому, но, тем не менее, всегда полезно поделиться знаниями с другими людьми.
