Vue 和 Vue Material 的缓慢输入

Question

我正在使用带有 Vue Material 的 VueJs 2.0。我正在渲染一个包含多个输入字段和/或选择字段（VueMaterial 组件）的行的表格。

将数据输入到输入中时，组件变得非常慢。这是一个live demo on JSFiddle，可以更好地展示这个问题。

Vue.use(VueMaterial);

Vue.material.registerTheme('default', {
  primary: 'indigo',
  accent: 'indigo',
  warn: 'red',
  background: 'white'
});

new Vue({
  el: '#app',
  beforeUpdate: function() {
    console.log('Rerendering');
    console.log(this);
  },
  data: {
    countries: [{
      id: "CAN",
      value: "CAN"
    }, {
      id: "UAE",
      value: "UAE"
    }, {
      id: "UK",
      value: "UK"
    }, {
      id: "USA",
      value: "USA"
    }, {
      id: "ZA",
      value: "ZA"
    }],
    tableData: [{
        id: 1,
        name: 'Name 1',
        number: Math.random(),
        country: 'ZA'
      }, {
        id: 2,
        name: 'Not another name',
        number: Math.random(),
        country: "UK"
      }, {
        id: 3,
        name: 'One more name',
        number: Math.random(),
        country: "UAE"
      }, {
        id: 4,
        name: 'Another name',
        number: Math.random(),
        country: "USA"
      }, {
        id: 5,
        name: 'Another name',
        number: Math.random(),
        country: "CAN"
      }, {
        id: 6,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 7,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 8,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 9,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 10,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 11,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 12,
        name: 'Name 1',
        number: Math.random()
      }, {
        id: 13,
        name: 'Not another name',
        number: Math.random()
      }, {
        id: 14,
        name: 'One more name',
        number: Math.random()
      }, {
        id: 15,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 16,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 17,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 18,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 19,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 20,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 21,
        name: 'Another name',
        number: Math.random()
      }, {
        id: 22,
        name: 'Another name',
        number: Math.random()
      },

    ]
  }
});

<div id="app">

  <table>
    <tbody>
      <tr v-for="(item, rowIndex) in tableData" :key="item.id">

        <td>
          <md-input-container>
            <md-input type="text" v-model="item.name" />
          </md-input-container>
        </td>
        <td>
          <md-select v-model="item.country">
            <md-option v-for="option in countries" :value="option.id">
              {{ option.value }}
            </md-option>
          </md-select>
        </td>
        <td>
          <md-select v-model="item.country">
            <md-option v-for="option in countries" :value="option.id">
              {{ option.value }}
            </md-option>
          </md-select>
        </td>
        <td>
          {{ item.number }}
        </td>
      </tr>
    </tbody>
  </table>

</div>

在输入文本时尝试保留一个字母。随着行数的增加，即使是正常的打字也会变得很慢。

知道如何解决这个问题吗？

Answer 1

看来问题出在 Vue-Material 上。已经为此记录了一个错误。 https://github.com/marcosmoura/vue-material/issues/544

Answer 2

似乎移除第二个选择框可以让事情变得简单（参见an updated demo）。

你真的需要两个相同的选择框吗？

<div id="app">

  <table>
    <tbody>
      <tr v-for="(item, rowIndex) in tableData" :key="item.id">
        <td>
          <md-input-container>
            <md-input type="text" v-model="item.name" />
          </md-input-container>
        </td>
        <td>
          <md-select v-model="item.country">
            <md-option v-for="option in countries" :value="option.id">
              {{ option.value }}
            </md-option>
          </md-select>
        </td>
        <td>
          {{ item.number }}
        </td>
      </tr>
    </tbody>
  </table>

</div>