v-для
Vue предоставляет очень мощную директиву v-for, которая отображает элементы массивов и свойства объектов в элементы. В качестве разделителя можно использовать ín или of.
Когда вы повторяете массив, «(элемент, индекс) в элементах» предоставляет index в качестве фактического индекса элемента в массиве. А в объектных сценариях вы можете использовать «(значение, ключ, индекс) в объекте» для доступа к ключу каждого свойства.
Вы должны обратить внимание, что Vue ввел политику «заплаты на месте» во время рендеринга элемента. Это означает, что если вы изменили порядок элементов в массиве, Vue не будет повторно отображать весь список, а обновит все, что изменилось из-за измененного массива. Это очень быстро, но иногда может вызвать побочные эффекты.
Чтобы позволить Vue отслеживать фактический порядок элементов без политики «исправления на месте», вы должны предоставить директиву :key, чтобы явно указать Vue сделать это. Директива :key не будет отображаться в атрибуте key в отображаемом содержимом, потому что это просто трассировка для Vue для отслеживания порядка элементов.
Обнаружение изменения массива
Вы когда-нибудь задумывались, как именно Vue, а также другие прогрессивные фреймворки JavaScript реализуют свои собственные реактивные системы? Здесь мы хотели бы поговорить о небольшом аспекте реактивной системы — обнаружении изменений массива.
Согласно документу Vue, существует несколько методов мутации, обернутых Vue.
- толкать()
- поп()
- сдвиг()
- отменить сдвиг ()
- соединение ()
- Сортировать()
- обеспечить регресс()
Почему Vue оборачивает эти методы? Вернемся к примерам, данным Vue. Вы заметили, что каждый раз, когда вы добавляете новые элементы в массив, HTML DOM также обновляется? Чтобы выполнять функции рендеринга, Vue должен получать уведомления о соответствующих изменениях элементов массива. Если вы просмотрели исходный код Vue js, вы обнаружите, что Vue обернул эти методы, перезаписав исходные методы прототипа (только описанные выше методы).
Итак, у вас выявлена нехватка обнаружения изменения массива. Если вы хотите обновить массив, определенный в базовых данных, используйте Vue.set(array, indexToChange, newValue).
Энтони Гор поделился своим Средним [реактивность в Vue.js (и его подводные камни)]. Это действительно стоит прочитать.
Что касается неизменяющих методов, таких как filter(), concat() и slice(), лучше всего заменить исходный массив с новым. Поскольку эти неизменяющие методы не запускают обновления в Vue, эффективно заменить исходный массив результатом этих методов.
Если вам нужно, возможно, иногда, изменить длину массива, определенного в данных Vue, вместо этого используйте splice().
Обнаружение изменения объекта
Энтони также упомянул, что если мы назначим новое свойство существующему объекту, это не вызовет обновления Vue. Есть два способа справиться с этим вопросом.
- Используйте Vue.set(object, propertyName, value).
- Замените старый объект полностью новым. Взгляните на официальный пример Vue:
v-для диапазона
Когда мы используем v-for, аргумент после «in» может быть целым числом. Таким образом, Vue будет повторять содержимое несколько раз.
Если вам нравится мой контент, хлопайте в ладоши и подписывайтесь на меня. Проверьте мой оригинальный контент на devchache.com.
