FEMessage / FEMessage/nuxt-micro-frontend
Lifecycle Hooks called in wrong order
- 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.

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.
---

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
Assessment
This issue has not been assessed yet.