Vue.jsの覚書 | ワクガンス

Vue.js 1万件データの検証 | Vue.jsの限界

データ一万件の検証結結果

一覧表の各行にテキストボックスなどが含まれている場合、どうにか動くレベルであり重い。1000件くらいが理想だ。
しかし、表にテキストボックスが含まれていないのであれば意外と軽い。1万件でも大丈夫。それでも10万件ともなると使い物にならない。

Vue.jsは1000件以内のデータ範囲で運用するのが理想。

Demo

PHP

$data = [];
$data_count=10000; // データ一万件
for($i=0; $i<$data_count; $i++){
    $id = $i + 1;
    $name = "銀河鉄道{$i}号";
    $value_a = $i * 100;
    $data[] = [
        'id'=>$id,
        'name'=>$name,
        'value_a'=>$value_a,
    ];
}

$data_json = json_encode($data,JSON_HEX_TAG | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_HEX_APOS);
	

HTML

<div id="app1">
  <div>
  <input type="text" v-model="message1" />
  {{ message1 }}
  </div>

	<table class="table">
		<thead><tr><th>id</th><th>名前</th><th>値</th><th></th></tr></thead>
		<tbody>
			<tr v-for="ent in data">
				<td>{{ent.id}}</td>
				<td><span>{{ent.name}}</span> </td>
				<td><span>{{ent.value_a}}</span> </td>
			</tr>
		</tbody>
	</table>
</div>

<input id="data_json" type="hidden" value='<?php echo $data_json; ?>' />
	

JavaScript

var app;

$(()=>{
	
	let data_json = $('#data_json').val();
	let data = JSON.parse(data_json);
	
	app = new Vue({
		el: '#app1',
		data: {
			message1: 'ゴロニャゴゴロニャゴ',
			data:data,
		}
	});
});
	

2022-11-3

xxx

2022-11-3