FEMessage / FEMessage/nuxt-micro-frontend

Lifecycle Hooks called in wrong order

Open
#41 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
128
Forks
25
PR merge metrics
No merged PRs in 30d

Description

## Describe the bug
A clear and concise description of what the bug is.

When I add a `fetch()` and a `created()` hook to a view, the `fetch` hook is called before the `created`.

In a regular Nuxt application, it looks like the `created` hook is called before the `fetch` hook.

What seems to be happening for me, is that the `fetch` hook is called and sets data on the component to the response from fetch. Then created is called and the data is reset to the initial value.

## Screenshots
If applicable, add screenshots to help explain your problem.

Screenshot 2021-09-07 at 10 12 55

This screenshot shows the order of hooks called within a normal Nuxt application. You can see the `created` hook is fired first, and the `testData` on the object is currently the initialised value of an empty array.

The `fetch` hook is then called, and it sets `testData` to be an array with a value.

Inspecting the vue instance after shows that `testData` is now set to be the array with a value.

---
Screenshot 2021-09-07 at 10 15 11

This screenshot shows the same reproduction but inside nuxt-micro-frontend. Here you can see that the `fetch` hook is being called first, and that `testData` has not been initialised.

The `created` hook is then called after with the initialised value. Inspecting the Vue instance afterwards, you can see that `testData` is the initialised value. The hooks also seem to be getting called twice.

## To Reproduce
Steps to reproduce the behavior:
1. Go to `single-spa-demo` > `nuxt-subapp` > `views` > `home` > `index.vue`
2. Add the hooks to the component:
```

export default {
data() {
return {
testData: []
};
},
async fetch() {
console.log("fetch hook called, testData = ", this.testData);
console.log("setting testData within fetch");
this.testData = ["value"];
console.log(
"testData has been set within fetch, testData = ",
this.testData
);
},
created() {
console.log("created hook called, testData = ", this.testData);
},
methods: {
go2about() {
this.$router.push({ name: "About" });
},
toast() {
this.$sdk &&
this.$sdk.toast({
message: "来自 nuxt 触发的 toast",
type: "success"
});
}
}
};

```
3. Run the application and go to the view
4. See output in the console.

## Expected behavior
A clear and concise description of what you expected to happen.

The created hook should be called first, before the fetch hook.

## environment information
- Version 1.6.0
- OS: [e.g. macOS Big Sur]
- Browser: Any

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.