Question

我已经在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()的组件方法，该方法继承了可以在props上设置的称为.qualifier()的其他函数。

我的问题：当我在每个keydown .items的文本区域中键入任何内容时，一旦我向集合（.getGroupName()）中添加了任何标签，就好像被调用了。好像输入任何内容到textarea都会重新渲染所有组件？

您知道如何避免这种行为吗？我希望.getGroupName仅在添加新标记时被调用。

此处显示完整代码： https://codepen.io/anon/pen/bKOJjo?editors=1011（我已放置debugger;来捕获运行时进入.qualifier()的时间。

有任何帮助。

It Man

Answer 1

TL; DR;
您不能，您可以做的就是优化以减少函数调用。

重绘是动态的，由数据更改触发。因为您具有功能（v-model和@keydown），所以您将更新数据。问题在于，当您调用函数:data-group="getGroupName(item)"时，它将每次都执行，因为它不对可能更改了哪些数据进行了假设。

一种处理方法是将groupName设置为计算的键-值对象，您可以在不调用该函数的情况下查找该对象。然后，您可以使用:data-group="getGroupName[item]"而无需在重绘时调用该函数。对v-html="tagRender(item)"

应该执行相同的操作

Answer 2

与其尝试应对框架如何处理数据输入事件和呈现的方法，不如利用它来发挥自己的优势：

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个不同的事件修饰符以实现所需的结果，但在这里我将重点介绍它们的组合：

@keyup.enter.exact -允许控制触发事件所需的系统修饰符的确切组合。在这种情况下，我们正在寻找输入按钮。
@keyup.shift.enter -这很有趣。我们可以尝试使用此参数（和空白值）来防止我们添加到@keyup.enter.exact的事件触发，而不是试图用骇客的方法来防止框架触发两个事件。我必须注意，=""对于整个安装正常工作至关重要。如果没有它，您将无法激发出add方法，就像我的例子所示。

我希望这会有所帮助！

如何避免Vue组件重绘？

2 个答案:

事件修饰符修改