I have a Vue component: task.vue which generates a list of tasks, and an epic.vue component which is the parent of task.vue, so for each epic.vue I generate it's tasks list from task.vue.
The problem is that when I reload the page, the browser freezes for 4-5 seconds until the task.vue component renders completely.
Everytime I reload the page I have an ajax that fetches all the data from an api function. It returns a nested array containing epics(folders in folders), each with it's own set of tasks. It is indeed a big array, could contain 1000+ records.
Is there a way to fix the freezing of the browser while the task.vue component loads ?
In my epic.vue I simply pass a prop to task.vue component containing all the task that current epic has.
My array structure and vue rendering is exactly like: https://vuejs.org/examples/tree-view.html.
If the loading time is directly related to the number of records you're loading then you could consider loading an initial chunk (e.g. 100 or so) to allow for a quick render and then lazy load the rest in immediately or as needed in same-sized chunks.
Related
My problem is the following:
I need to render a bunch of Tableau graphs on a page.
I am currently calling them in tableau-graphs component as follows:
TableauGraphs Component
<template>
...
<tableau-graph
v-if="urls.length > 0"
v-for="(chartUrl, index) in urls"
:src="getVizUrl(chartUrl, ticketList[index])"
/>
...
</template>
When I do this, all the charts are called immediately one after another, and tableau decides the order in which they are loaded. This behaviour is undesired because there might be many graphs and tableau can decide to load a graph much further down on the screen before the first one.
I want to try to do the following:
make tableau-graph component emit a ready event once its loaded.
the parent tableau-graphs listen to that event and load the next chart in urls.
repeat 1-2 until there are no more charts to load.
I have gotten the child component to emit a custom event and listen to it. However, I have not been able to programmatically add a new component in the template. I have tried using h function but I am unsure how to mix it with a regular template syntax.
So, my questions are:
How do I programmatically add an existing Vue component to another in script setup?
Is this a desirable way to go about solving this issue, or is there more elegant way to solve this problem? (For example, using Async Components and/or Suspense)
I have a vue.js component called "Table".
Table renders approximately 25K "Cell" components, which are svgs, using a v-for.
Each cell component properly has a key identified.
The table renders fine, if a bit slowly.
The problem is that when I try to navigate away from that route, the browser seems to hang for about half a minute. It seems that it's taking a while to clear the dom. Any ideas?
I am studying Vue.js (3).
I have a component which is used a lot of time (in a loop). The render is something like that :
This component makes a get (Axios) when it is created. So if I have 10 loops, I have 10 gets which return the same thing.
I try to make only 1 call (at the first component) and not the other calls, without the use of vuex. Is it possible in Vue.js and how to do that ? (I tried "mounted" instead of "created", without success).
You need to make the request in the parent component in which the loop is rendered. After that pass the response data as a prop to each item.
I have 2 v-tab in which the data is updated dynamically. Sometimes if a huge data comes switching between the tabs takes a long time. In each tab, I will be creating input fields, text areas based on the response. So if response is so huge I need to create many fields which is taking long time to render. Is there a way to optimize this, I tried to keep a loader when switching the tabs, but don't know when the dom will get loaded completed. Is there a life cycle event to handle it in vue? I tried updated() event with "nextTick" but it is called before the render.
I construct deep nested tree of parent and children Vue custom components using my top level component dynamically and then I am updating the data from which all tree is constructed. Which has an effect of rendering the entire tree (its a form with various custom components). I refresh/rebuild the whole form after fetching the data (which is what vue do for reactive data) that itself tell me how to regenerate the view (its like a JSON Schema from which I render the entire view).
This is related to my other issue here.
I am observing a very weird behavior in my Vue Application. When I destroy all my children components and rebuild the data to force rendering the form, it appears that even after I have called $destroy on every child component...Vue is not entirely removing them from cache?
Does vue remove the component from cache if a $destroy is called ?
Because I do not see multiple components of the same type in the Vue component list in the Chrome Vue DevTool extension panel. But I see that the same custom event is handled twice by the same component. Same function that handle the events is getting called twice even though there is only one component visible in Vue DevTools of this type.
This only happens after I render the form. When the page is loaded for the first time every thing works. Then after I reset the form by destroying the child component and resetting the data to re-render the form, magically this child component start handling the event twice.. and in 3rd render it handle the events thrice. But I see only one component in google chrome VueJS DevTool extension panel. So my guess is that vue is still keeping the previously destroyed component in cache. I am trying to figure out how should I destroy those components in the cache.
If anyone has observed something similar and found a solution please let me know.
At the moment I am going to dig little bit more on my component keys (this particular component does not have explicit key set by me).
First and foremost, the vue documentation states:
vm.$destroy
In normal use cases you shouldn’t have to call this method yourself.
Prefer controlling the lifecycle of child components in a data-driven
fashion using v-if and v-for.
So instead of destroying and rebuilding the components manually yourself, you should really letting vue handle that via v-if and v-for. If the components aren't updating to your changes, you might be dealing with a reactivity issue.
As you mentioned that this is a deeply nested structure, the reactivity is key to keeping the components up to data with the data.
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:
Vue.set(vm.someObject, 'b', 2)
Inside of a component:
this.$set(this.someObject, 'b', 2)
Also, keep in mind that Vue should be doing the heavy lifting in regards to component management, while you should define the parameters by which a component is rendered.