Vue 和 Vue 的输入速度慢 Material

Question

我在 Vue Material 中使用 VueJs 2.0。我正在渲染一个 table 有很多行，其中包含多个输入字段 and/or select 字段（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

似乎删除第二个 select 框可以简化事情（参见 an updated demo）。

您真的需要两个相同的 select 盒子吗？

<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>

Answer 2

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

Vue 和 Vue 的输入速度慢 Material

Slow inputs with Vue and Vue Material

vue.js

vue-material