前言：

在開發中偶然檢查Network請求的時候發現，在頁面中created鉤子函式中請求了一個介面，但是頁面這個頁面載入的時候，介面會連續請求兩邊，然後我就排查是否有其他地方呼叫了同樣的介面，檢查了好幾遍後發現並沒有，WTF，然後我在created中列印了一下，驚奇的發現。。。created會執行兩次列印。。。

WTF、WTF、WTF，小朋友你是否有很多問號？？？，然後試了下，不光created會執行兩遍，mounted也行，就連watch裡面監聽的也會，握草（草是一種植物），此處省略我咔咔排查了一個小時各種刪除各種排查的步驟。。。

得出以下結論：

第一種：

頁面佈局不合理，會導致執行兩遍，比如行內元素內嵌套了塊級元素，然後塊級元素又使用了for，或者if，要想排查是否是這種情況，只能一點點刪除程式碼，看看刪除了那一塊的程式碼後不再執行兩遍，然後從病根出排查修改。

第二種：

有使用v-if和v-else的結合也會執行兩遍，這種的我測試了下，把v-if都改成v-show。。。就TM的好了。

第三種：

我在頁面中使用了swiper，發現。。。swiper的程式碼也會觸發執行兩遍，應該是swiper的程式碼觸發了規則，然後我在swiper元件使用一個div包裹了一下。。。發現好了，無語，毫無規則可言

第四種：

還未發現，，，歡迎評論增加

最後：

此文章使用了較多的**修飾詞，請原諒。。。因為那種你想象不到的問題原因著實讓人。不說了，求個贊吧！！！

補充知識：vue.js頁面載入執行created,mounted先後順序

created頁面載入未渲染html之前執行。

mounted渲染html後再執行。

由於created在html模板生產之前所以無法對Dom進行操作而mounted可以。

以上這篇解決nuxt頁面中mounted、created、watch執行兩遍的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。