353  /  381

Приёмы и хитрости

Просмотров: 744 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

Приёмы и хитрости

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

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();
		}
	}
},


0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии