Speed up rendering for very large data

It does this by not rendering properties that aren't opened. It works
best when the data is chunked.

The test data has 100 chunks with 100 items each. Without this change,
it would take 2000ms to render all 10000 properties. With this change,
properties are re-rendered when clicked, which takes 30-50ms, which is a
huge improvement.

It's not perfect, but it's a huge improvement for viewing large amounts
of data with heavily nested properties.

Author: mattmess1221

dev/serve.vue

@@ -32,6 +32,15 @@
 	import { defineComponent } from 'vue';
 	import JsonView from '@/JsonView.vue';
 
+	// large chunked data, takes 2s to render all at once.
+	const largedata: any = {};
+	for (let i = 0; i < 100; i++) {
+		const chunk: any = largedata[i] = []
+		for (let j = 0; j < 100; j++) {
+			chunk.push(j);
+		}
+	}
+
 	export default defineComponent({
 		name      : 'ServeDev',
 		components: { JsonView },
@@ -64,7 +73,8 @@
 					],
 					object   : {
 						working: 'properly'
-					}
+					},
+					largedata
 				};
 			},
 			colorScheme(): string {

src/JsonViewItem.vue

@@ -16,7 +16,7 @@
 				v-for="child in data.children"
 				:key="getKey(child)"
 				:data="child"
-				v-show="open"
+				v-if="open"
 				:maxDepth="maxDepth"
 				:canSelect="canSelect"
 			/>