fix(vue-app): prevent calling asyncData in keep-alive pages (#5945)

[Elevista]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Resolves: #5945
Reproduction link: https://codesandbox.io/embed/codesandbox-nuxt-7ostd

related code
https://github.com/nuxt/nuxt.js/blob/f3d29e378087b6c6c686a03292c2bce409161110/packages/vue-app/template/client.js#L386-L397
https://github.com/nuxt/nuxt.js/blob/f3d29e378087b6c6c686a03292c2bce409161110/packages/vue-app/template/utils.js#L24-L31
Component.options.__hasNuxtData value of SSR rendered keep-alive page is true

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[Atinux]

Thanks for the PR.

A test is failing and actually it should not since it actually does not use keep-alive (https://github.com/nuxt/nuxt.js/blob/dev/test/fixtures/children/layouts/patch.vue#L3).

In order to check it, I believe you may want to keep the instance of the page, if it exists, get its VNode and checks if it uses keepAlive (see https://github.com/vuejs/vue-router/blob/dev/src/components/view.js#L34)

[Elevista]

@Atinux oh yeah... I forgot e2e test 😨
I'll figure this out

p.s. I had checked test:fixtures and all passed.
test:e2e had to run individually..

[codecov-io]

Codecov Report

Merging #5947 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #5947   +/-   ##
=======================================
  Coverage   95.68%   95.68%           
=======================================
  Files          82       82           
  Lines        2689     2689           
  Branches      690      690           
=======================================
  Hits         2573     2573           
  Misses         98       98           
  Partials       18       18

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.35% <ø> (ø)	⬆️
#unit	92.67% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ac723e6...f6ef962. Read the comment docs.

[Atinux]

Nice @Elevista

Would be nice to complete with another test (I guess adding a new layout with <keep-alive>, something like patch-keep-alive.vue there: https://github.com/nuxt/nuxt.js/blob/dev/test/fixtures/children/layouts/)

[leebyungjun-nbt]

@Atinux
Ok, I'll try

[Elevista]

little late because I'm busy with work these days. 😅

[highruned]

Why shouldn't asyncData be called again with keep-alive? data is called. What makes asyncData different? it's often used as a replacement simply to make it SSR compatible. I use the params.id to fetch different model data in asyncData. When navigating, the function is called, but it's not updating the UI, because it's missing the same workaround that data has..
https://github.com/nuxt/nuxt.js/blob/055e99a21b0c2f681025c5adc90fef19bed76b96/lib/app/client.js#L455-L457

Now it's not even going to be called? :-|

[Elevista]

@ericmuyser
data function will be called only once in keep-alive page.
but asyncData is being called every time it active and makes nothing change
because it will be ignored here https://github.com/nuxt/nuxt.js/blob/f3d29e378087b6c6c686a03292c2bce409161110/packages/vue-app/template/utils.js#L24-L31
If there's something heavy ajax job in asnycData, it's really a problem.

Key of keep-alive page is route url, so if params.id is in url,
It will create new instance for each params.id. This is not going to be your problem.

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[541xxx]

It's been a long time, could this merge request be reviewed or merged?

[Elevista]

This was wrong approach..