VueJS performance cost of $emit and Watchers
up vote
2
down vote
favorite
I've built a music app (using Vue and ToneJS) in which the user creates looping tracks which change in various ways according to user choices. This utilizes a rather complex set of scaling counter mechanisms. Having built the musical functionality, I am working on a "progress bar" which shows when the next transition is about to occur.
Currently, the way I am doing this is to calculate the total steps (each note is a 'step') needed and compare it to the progress of each counter (on the Vuex state). In terms of the code, that's a lot of mental overhead.
A better way to do this might be to use $emit to send out a 'tick' each time a step advances, which would be picked up by the component featuring the progress bar and compared to the steps needed. OR, use of a watcher on the component could detect the change and send a tick along.
BUT, I've already run into some timing performance problems with the app, and timing is critical for this. I'm a relatively new dev and don't yet understand performance well. So what I'm wondering is how 'expensive' is it to use $emit, or watchers? Since it would be attached to the 'motor' of the app, it would be called constantly. Is there any danger that this could gum up the gears?
performance vue.js
asked Nov 18 at 19:15
Gregory Tippett
4391415
add a comment |
up vote
2
down vote
favorite
I've built a music app (using Vue and ToneJS) in which the user creates looping tracks which change in various ways according to user choices. This utilizes a rather complex set of scaling counter mechanisms. Having built the musical functionality, I am working on a "progress bar" which shows when the next transition is about to occur.
Currently, the way I am doing this is to calculate the total steps (each note is a 'step') needed and compare it to the progress of each counter (on the Vuex state). In terms of the code, that's a lot of mental overhead.
A better way to do this might be to use $emit to send out a 'tick' each time a step advances, which would be picked up by the component featuring the progress bar and compared to the steps needed. OR, use of a watcher on the component could detect the change and send a tick along.
BUT, I've already run into some timing performance problems with the app, and timing is critical for this. I'm a relatively new dev and don't yet understand performance well. So what I'm wondering is how 'expensive' is it to use $emit, or watchers? Since it would be attached to the 'motor' of the app, it would be called constantly. Is there any danger that this could gum up the gears?
performance vue.js
asked Nov 18 at 19:15
Gregory Tippett
4391415
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I've built a music app (using Vue and ToneJS) in which the user creates looping tracks which change in various ways according to user choices. This utilizes a rather complex set of scaling counter mechanisms. Having built the musical functionality, I am working on a "progress bar" which shows when the next transition is about to occur.
Currently, the way I am doing this is to calculate the total steps (each note is a 'step') needed and compare it to the progress of each counter (on the Vuex state). In terms of the code, that's a lot of mental overhead.
A better way to do this might be to use $emit to send out a 'tick' each time a step advances, which would be picked up by the component featuring the progress bar and compared to the steps needed. OR, use of a watcher on the component could detect the change and send a tick along.
BUT, I've already run into some timing performance problems with the app, and timing is critical for this. I'm a relatively new dev and don't yet understand performance well. So what I'm wondering is how 'expensive' is it to use $emit, or watchers? Since it would be attached to the 'motor' of the app, it would be called constantly. Is there any danger that this could gum up the gears?
performance vue.js
asked Nov 18 at 19:15
Gregory Tippett
4391415
I've built a music app (using Vue and ToneJS) in which the user creates looping tracks which change in various ways according to user choices. This utilizes a rather complex set of scaling counter mechanisms. Having built the musical functionality, I am working on a "progress bar" which shows when the next transition is about to occur.
Currently, the way I am doing this is to calculate the total steps (each note is a 'step') needed and compare it to the progress of each counter (on the Vuex state). In terms of the code, that's a lot of mental overhead.
A better way to do this might be to use $emit to send out a 'tick' each time a step advances, which would be picked up by the component featuring the progress bar and compared to the steps needed. OR, use of a watcher on the component could detect the change and send a tick along.
BUT, I've already run into some timing performance problems with the app, and timing is critical for this. I'm a relatively new dev and don't yet understand performance well. So what I'm wondering is how 'expensive' is it to use $emit, or watchers? Since it would be attached to the 'motor' of the app, it would be called constantly. Is there any danger that this could gum up the gears?
performance vue.js
performance vue.js
asked Nov 18 at 19:15
Gregory Tippett
4391415
asked Nov 18 at 19:15
Gregory Tippett
4391415
asked Nov 18 at 19:15
Gregory Tippett
4391415
asked Nov 18 at 19:15
Gregory Tippett
4391415
asked Nov 18 at 19:15
Gregory Tippett
4391415
4391415
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53364553%2fvuejs-performance-cost-of-emit-and-watchers%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
