Sign in

Why are created hooks of all pages executed twice in Vue?

Rolf edited in Fri, 13 May 2022

The following figure shows my router configuration, which has only one flat layer, except app.vue The created hook of the project is only executed once, and the created life cycle of all other pages of the project is executed twice respectively (the project uses the tab component of mint UI, I don't know if it is related to this)


How to make created execute only once? It has caused a lot of repeated calls to the interface to get data

6 Replies
commented on Fri, 13 May 2022

I have also encountered this problem. This is not a routing problem. Routing will not cause repeated execution of hook functions. The possible situations of repeated execution are as follows: 1

  • The component in V-IF is a child component (the child component may affect part of the data of the parent component, which is the problem I encountered. My subcomponents are nested with multiple levels of components, which is very complicated. Solution: change V-IF to v-show or merge components)
  • The component or nested sub component exists Vue.mixin
commented on Fri, 13 May 2022

The code is too little. Don't replace the code with pictures. You will be trampled on~

commented on Fri, 13 May 2022

I haven't encountered this kind of problem. You can only wait for the person who has encountered the same problem to answer, because the possibility of finding the cause of the problem from your description and a picture is zero

commented on Sat, 14 May 2022

Upgrade your mini UI version. Maybe it overlaps with the Vue build. Also, do you create the hook to execute the same logic twice? Is the trigger time node similar to the same?

commented on Sat, 14 May 2022

The reason for the problem has been found. Not only created has been executed twice, but the hook of the whole life cycle has been executed twice. The reason is that the use of the tab component of mint UI leads to repeated route mounting (maybe I use the wrong posture) ·· ), and the global instance that repeatedly declares Vue. Delete the redundant global Vue instance and use the tab component correctly

commented on Sat, 14 May 2022

< div id = "app" > id = "app" and index.html Duplicate ID of

lock This question has been locked and the reply function has been disabled.