Gumaa
Gumaa
Explore posts from servers
NNuxtDDeno
PostsComments
NNuxt
Created by Gumaa on 6/27/2024 in #❓・help
Performance disadvantages of splitting components into separate chunks
@manniL / TheAlexLichter a little bit late reply, but... is Lazy avaliable in Nuxt2? And besides that I'm interested specifically about using that for components that do not have v-if on them. Components that will be always rendered. Does that make sense or maybe it will be bad for the performance?
5 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
Ok, I was able to strip down everything and I think I have a representative minimal reproduction setup: https://stackblitz.com/edit/vue2-vue-cli-2ukgog?file=src%2FApp.vue,src%2Fmain.js I always believed that Vue does not track dependecies of a function like this. But it seems it does. I can not find any mention of this anywhere honestly.
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
I did something like this: 
watch(product, (newValue, oldValue) => {
  console.log({ oldValue, newValue });
}, { immediate: true });
watch(product, (newValue, oldValue) => {
  console.log({ oldValue, newValue });
}, { immediate: true });
And it is printing when product has changed for the first time. But then after 10 seconds had passed and the request with the rules came back, it is not logging anything, and yet the computed just fires magically. So it really seems like it is deeply tracking dependecies of a function that it is calling.
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
Btw. how watcher being "immediate" helps in that scenario?
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
I mean the computed is pretty much only a call to this function !isProductExcluded(product.value), so I could try and setup a watcher just for product. I'm pretty sure it is not changing, but I will make sure with a watcher.
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
onTrack / onTrigger are also not available 😭
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
Ok, I've found that onRenderTracked and onRenderTriggered are not supported 😦
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
I'm using Vue 2.6 with composition api package
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
Thanks for the response. Do you know if it is available for Vue 2? I'm checking right now docs for it but I can't find it
17 replies
NNuxt
Created by Gumaa on 5/20/2024 in #❓・help
How to debug computed property
This isProductExcluded function looks something like this (not exactly the same, but data flow is similar): 
const { excludedRules } = useExcludedRules();

const ruleA = computed(() => excludedRules[0]);
const ruleB = computed(() => excludedRules[1]);
const ruleC = computed(() => excludedRules[2]);

const isProductExcluded = (product: Maybe<ProductVariant>) => {
  return isConditionTrue(product, ruleA.value) || 
    isConditionTrue(product, ruleB.value) || // this rule is changing
    isConditionTrue(product, ruleC.value);
};
const { excludedRules } = useExcludedRules();

const ruleA = computed(() => excludedRules[0]);
const ruleB = computed(() => excludedRules[1]);
const ruleC = computed(() => excludedRules[2]);

const isProductExcluded = (product: Maybe<ProductVariant>) => {
  return isConditionTrue(product, ruleA.value) || 
    isConditionTrue(product, ruleB.value) || // this rule is changing
    isConditionTrue(product, ruleC.value);
};
So I'm sending an async call to get the rules. Some time later I'm getting the response and I'm returning it as excludedRules. Then all the computed properties for rules are correctly recalculated. But at the point I got the response from the backend my component is already rendered and the function isProductExcluded already returned a value. product.value is already there and it is not changing. So even if now I have the needed data it shouldn't run. But it does! I even added artificial 10 second delay to the request to get excludedRules . Everything is rendered as it should, then data comes 10 seconds later, and it recalculates shouldShowProduct even when it should be impossible for Vue to do it, because this data is not a dependency of this computed. I'm questioning my sanity at that point a little bit. How do I debug this? How can I check what exactly is triggering this computed for shouldShowProduct? I don't think there is any way that Vue is somehow deeply checking dependencies of a function to check if computed needs rerunning? Or does it?
17 replies