我正在使用 VueJs 2.0 和Vue Material。我正在渲染一个包含多个输入字段和/或选择字段（VueMaterial 组件）的行的表格。
当将数据输入输入时，组件变得非常慢。这是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>
在输入文本输入时尝试保留一个字母。随着更多的行，即使是正常的打字也会变得很慢。
知道如何解决这个问题吗？