Дата последнего изменения: 15.01.2019
Приёмы и хитрости |
Если данные не требуют реактивности (например, константы или языковые фразы), то для содержащего такие данные объекта необходимо указывать, что он неизменяемый. Это поможет шаблонизатору меньше отслеживать данные, и в масштабах всего приложения сэкономит ресурсы.
computed: { applicationConstants(state) { return Object.freeze({ const1: 'value 1', const2: 'value 2', }) } }
При использовании циклов v-for
у корневых элементов цикла всегда нужно указывать ключ :key
- это позволит шаблонизатору правильно отрабатывать возможные анимации и улучшит переиспользование dom-дерева при изменении входных данных. Подробнее в статье
Использование Key в списках.
При обновлении Vue списка элементов, отображаемого директивой v-for
, по умолчанию используется стратегия обновления «на месте». Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент «на месте», чтобы он отображал новые данные по соответствующему индексу. Во Vue версий 1.x подобное поведение достигалось указанием track-by="$index"
.
Режим по умолчанию эффективен, но применим только в случаях, когда результат отрисовки вашего списка не полагается на состояние дочерних компонентов или временные состояния DOM (например, значения полей форм).
Подробнее...
<template v-for="operator in operators"> <div class="bx-livechat-user" :key="operator.id"> <div class="bx-livechat-user-name">{{operator.name}}</div> </div> </template>
Если используется анимация появления (выезд контента из-за пределов области видимости), то не используйте директивы автофокуса, так как браузер моментально установит фокус на элементе за пределами видимости и внешне анимация будет выглядеть не так, как ожидалось.
directives: { focus: { inserted(element, params) { element.focus(); } } },