With a very large array of objects and abundant data to render in Vue components on the DOM, the ideal approach is to only render the visible HTML. For instance, if each component is 100px in height and the container is 1000px tall, it makes sense to render only 10 components at a time. As the user scrolls down or up, elements can be rendered and "unrendered" in a FIFO (first in, first out) manner.
Which method would work best for this? One solution could involve utilizing an array of 10 objects and adding 100px to the container's height (with an extra 50px top and bottom). This way, when the user scrolls within that additional space, the FIFO action can be performed. Another possibility is to grant each component the ability to calculate (assisted by the window object) if it's visible and then proceed to render itself using a v-show directive. There are several potential approaches to tackle this issue.
(Please note that this question pertains specifically to dynamically rendering a list, rather than dynamically loading components.)
If you have any ideas, methodologies, standards, or techniques that could be helpful in this context, please feel free to share them!
var app = new Vue({
el: '#app',
data: {
users: Array(1000).fill({
gender: "male",
name: {
title: "mr",
first: "vincent",
last: "ouellet"
},
location: {
street: "6963 disputed rd",
city: "brockton",
state: "yukon",
postcode: "Z4J 0J2",
coordinates: {
latitude: "-60.8550",
longitude: "-36.0196"
},
timezone: {
offset: "+3:30",
description: "Tehran"
}
},
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1a05020f09021842031909000009182c09140d011c0009420f0301">[email protected]</a>",
login: {
uuid: "eb9b61f7-fb0b-4731-9a1c-f4b2a7b3b6a9",
username: "bigpeacock949",
password: "nyjets",
salt: "0TdUElhf",
md5: "0fbc0edb70fda545f8838634f11f4be2",
sha1: "f83e02d917721a1516b74937841b9c7f75a75d1e",
sha256: "69e2c04bd4ccb43815b529a7182e1e59b9f788032b8197af54b9b6d3f907b8a3"
},
dob: {
date: "1959-08-27T20:26:03Z",
age: 59
},
registered: {
date: "2013-10-20T04:51:58Z",
age: 4
},
phone: "647-173-6604",
cell: "544-306-1457",
id: {
name: "",
value: null
},
picture: {
large: "https://randomuser.me/api/portraits/men/13.jpg",
medium: "https://randomuser.me/api/portraits/med/men/13.jpg",
thumbnail: "https://randomuser.me/api/portraits/thumb/men/13.jpg"
},
nat: "CA"
}
)
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<ul v-for="(user, i) in users">
<li>
<image :src="`https://randomuser.me/api/portraits/men/${i}.jpg`"/>
<!-- IM THE REAL APLICATION THIS IS A VERY HEAVY UI -->
<pre>{{user}}</pre>
</li>
</ul>
</div>