Vue.js 2 Alternative to use key as JSON.stringify(obj) to rerender child component on change of obj from xhr...

Multi tool use
I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles)
at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.
To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"
The element looks like this:
<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>
This works. However I have put a console.log(this.allFiles)
at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.
for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}
I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.
javascript typescript vue.js vuejs2
|
show 1 more comment
I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles)
at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.
To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"
The element looks like this:
<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>
This works. However I have put a console.log(this.allFiles)
at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.
for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}
I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.
javascript typescript vue.js vuejs2
from where are you gettingfileIndex
? please provide more code
– Boussadjra Brahim
Dec 27 '18 at 17:10
I make only one xhr at a time. On the component I have reactive propertycurrentIndex
. When I make an xhr I set thethis.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question.for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates isallFiles
is getting modified.
– atiqorin
Dec 27 '18 at 17:29
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
1
allFiles
is array ofIUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the:key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount ashuge amount of rerender
– atiqorin
Dec 27 '18 at 20:36
|
show 1 more comment
I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles)
at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.
To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"
The element looks like this:
<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>
This works. However I have put a console.log(this.allFiles)
at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.
for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}
I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.
javascript typescript vue.js vuejs2
I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles)
at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.
To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"
The element looks like this:
<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>
This works. However I have put a console.log(this.allFiles)
at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.
for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}
I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.
javascript typescript vue.js vuejs2
javascript typescript vue.js vuejs2
edited Dec 27 '18 at 19:29
asked Dec 27 '18 at 16:40


atiqorin
764
764
from where are you gettingfileIndex
? please provide more code
– Boussadjra Brahim
Dec 27 '18 at 17:10
I make only one xhr at a time. On the component I have reactive propertycurrentIndex
. When I make an xhr I set thethis.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question.for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates isallFiles
is getting modified.
– atiqorin
Dec 27 '18 at 17:29
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
1
allFiles
is array ofIUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the:key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount ashuge amount of rerender
– atiqorin
Dec 27 '18 at 20:36
|
show 1 more comment
from where are you gettingfileIndex
? please provide more code
– Boussadjra Brahim
Dec 27 '18 at 17:10
I make only one xhr at a time. On the component I have reactive propertycurrentIndex
. When I make an xhr I set thethis.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question.for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates isallFiles
is getting modified.
– atiqorin
Dec 27 '18 at 17:29
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
1
allFiles
is array ofIUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the:key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount ashuge amount of rerender
– atiqorin
Dec 27 '18 at 20:36
from where are you getting
fileIndex
? please provide more code– Boussadjra Brahim
Dec 27 '18 at 17:10
from where are you getting
fileIndex
? please provide more code– Boussadjra Brahim
Dec 27 '18 at 17:10
I make only one xhr at a time. On the component I have reactive property
currentIndex
. When I make an xhr I set the this.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates is allFiles
is getting modified.– atiqorin
Dec 27 '18 at 17:29
I make only one xhr at a time. On the component I have reactive property
currentIndex
. When I make an xhr I set the this.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates is allFiles
is getting modified.– atiqorin
Dec 27 '18 at 17:29
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
1
1
allFiles
is array of IUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
– atiqorin
Dec 27 '18 at 20:36
allFiles
is array of IUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
– atiqorin
Dec 27 '18 at 20:36
|
show 1 more comment
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948182%2fvue-js-2-alternative-to-use-key-as-json-stringifyobj-to-rerender-child-compone%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948182%2fvue-js-2-alternative-to-use-key-as-json-stringifyobj-to-rerender-child-compone%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2AFRAP wVyiLCV60sE3WeIXRJi7dJA2uI2mV,xEQqOelGZz YcEU47k,Rry0cDediU
from where are you getting
fileIndex
? please provide more code– Boussadjra Brahim
Dec 27 '18 at 17:10
I make only one xhr at a time. On the component I have reactive property
currentIndex
. When I make an xhr I set thethis.currentIndex
to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question.for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } }
The thing that this code indicates isallFiles
is getting modified.– atiqorin
Dec 27 '18 at 17:29
please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43
I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31
1
allFiles
is array ofIUploadFile
(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the:key
changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount ashuge amount of rerender
– atiqorin
Dec 27 '18 at 20:36