Как избежать перерисовки vue компонента? - PullRequest
Новая
       5

Как избежать перерисовки vue компонента?

0 голосов
/ 04 июля 2018

Я подготовил элемент управления вводом тегов в Vue с группировкой тегов. Шаблоны включают в себя: 

<script type="text/x-template" id="tem_vtags">
<div class="v-tags">
  <ul>
    <li v-for="(item, index) in model.items" :key="index" :data-group="getGroupName(item)"><div :data-value="item"><span v-if="typeof model.tagRenderer != 'function'">{{ item }}</span><span v-if="typeof model.tagRenderer == 'function'" v-html="tagRender(item)"></span></div><div data-remove="" @click="remove(index)">x</div></li>
  </ul>
  <textarea v-model="input" placeholder="type value and hit enter" @keydown="inputKeydown($event,input)"></textarea>
  <button v-on:click="add(input)">Apply</button>
</div>
</script>

Я определил компонентный метод с именем .getGroupName(), который работает с другой функцией с именем .qualifier(), которая может быть установлена ​​через реквизит.

Моя проблема: как только я добавляю какие-либо теги в коллекцию (.items), когда я набираю что-нибудь в textarea для каждого нажатия клавиши .getGroupName(), кажется, вызывается. Похоже, что ввод чего-либо в textarea приводит к перерисовке всех компонентов?

Знаете ли вы, как избежать такого поведения? Я ожидаю, что .getGroupName будет вызываться только при добавлении нового тега.

Вот полный код: https://codepen.io/anon/pen/bKOJjo?editors=1011 (я поместил debugger;, чтобы ловить, когда время выполнения входит в .qualifier().

Любая помощь оценена.

Это человек

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Вместо того, чтобы пытаться бороться с тем, как фреймворк обрабатывает события ввода данных и рендеринг, вместо этого используйте его в своих интересах: 

new Vue({
  el: '#app',
  template: '#example',
  data() {
    return {
      someInput: '',
      someInputStore: []
    };
  },
  methods: {
    add() {
      if (this.someInputStore.indexOf(this.someInput) === -1) {
        this.someInputStore.push(this.someInput);
        this.someInput = '';
      }
    },
  }
});
<html>

<body>
  <div id="app"></div>
  <template id="example">
    <div>
      <textarea v-model="someInput" @keyup.enter.exact="add" @keyup.shift.enter=""></textarea>
      <button @click="add">click to add new input</button>
      <div>
        {{ someInputStore }}
      </div>
    </div>
  </template>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>

</html>

Модификаторы событий, модифицирующие

В примере вы можете видеть, что я использую 4 различных модификатора событий для достижения желаемого результата, но я сосредоточусь на их комбинации здесь:

  1. @keyup.enter.exact - позволяет управлять точной комбинацией системных модификаторов, необходимых для запуска события. В этом случае мы ищем кнопку ввода.
  2. @keyup.shift.enter - это интересный бит. Вместо хакерской попытки предотвратить запуск фреймворка для обоих событий, мы можем использовать это (и пустое значение), чтобы предотвратить запуск события, добавленного в @keyup.enter.exact. Я должен отметить, что ="" имеет решающее значение для правильной работы всей установки. Без этого вы не дадите альтернативе методу add, как показано в моем примере.

Надеюсь, это поможет!

0 голосов
/ 04 июля 2018

TL; DR;
Вы не можете, что вы можете сделать, это оптимизировать, чтобы уменьшить количество вызовов функций.

Перерисовки являются динамическими, вызванными изменением данных. поскольку у вас есть функции (v-model и @keydown), вы обновите данные. Проблема в том, что когда вы вызываете функцию: :data-group="getGroupName(item)", она будет выполняться каждый раз, потому что она не делает никаких предположений о том, какие данные могли измениться.

Одним из способов решения этой проблемы является установка groupName в качестве вычисляемого объекта key-val, который вы можете искать без вызова функции. Тогда вы можете использовать :data-group="getGroupName[item]" без вызова функции при перерисовке. То же самое должно быть сделано для v-html="tagRender(item)"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...