前言：

在開(kāi)發(fā)中偶然檢查Network請(qǐng)求的時(shí)候發(fā)現(xiàn)，在頁(yè)面中created鉤子函數(shù)中請(qǐng)求了一個(gè)接口，但是頁(yè)面這個(gè)頁(yè)面加載的時(shí)候，接口會(huì)連續(xù)請(qǐng)求兩邊，然后我就排查是否有其他地方調(diào)用了同樣的接口，檢查了好幾遍后發(fā)現(xiàn)并沒(méi)有，WTF，然后我在created中打印了一下，驚奇的發(fā)現(xiàn)。。。created會(huì)執(zhí)行兩次打印。。。

WTF、WTF、WTF，小朋友你是否有很多問(wèn)號(hào)？？？，然后試了下，不光created會(huì)執(zhí)行兩遍，mounted也行，就連watch里面監(jiān)聽(tīng)的也會(huì)，握草（草是一種植物），此處省略我咔咔排查了一個(gè)小時(shí)各種刪除各種排查的步驟。。。

得出以下結(jié)論：

第一種：

頁(yè)面布局不合理，會(huì)導(dǎo)致執(zhí)行兩遍，比如行內(nèi)元素內(nèi)嵌套了塊級(jí)元素，然后塊級(jí)元素又使用了for，或者if，要想排查是否是這種情況，只能一點(diǎn)點(diǎn)刪除代碼，看看刪除了那一塊的代碼后不再執(zhí)行兩遍，然后從病根出排查修改。

第二種：

有使用v-if和v-else的結(jié)合也會(huì)執(zhí)行兩遍，這種的我測(cè)試了下，把v-if都改成v-show。。。就TM的好了。

第三種：

我在頁(yè)面中使用了swiper，發(fā)現(xiàn)。。。swiper的代碼也會(huì)觸發(fā)執(zhí)行兩遍，應(yīng)該是swiper的代碼觸發(fā)了規(guī)則，然后我在swiper組件使用一個(gè)div包裹了一下。。。發(fā)現(xiàn)好了，無(wú)語(yǔ)，毫無(wú)規(guī)則可言

第四種：

還未發(fā)現(xiàn)，，，歡迎評(píng)論增加

最后：

此文章使用了較多的**修飾詞，請(qǐng)?jiān)?。。。因?yàn)槟欠N你想象不到的問(wèn)題原因著實(shí)讓人。不說(shuō)了，求個(gè)贊吧?。?！

補(bǔ)充知識(shí)：vue.js頁(yè)面加載執(zhí)行created,mounted先后順序

created頁(yè)面加載未渲染html之前執(zhí)行。

mounted渲染html后再執(zhí)行。

由于created在html模板生產(chǎn)之前所以無(wú)法對(duì)Dom進(jìn)行操作而mounted可以。

以上這篇解決nuxt頁(yè)面中mounted、created、watch執(zhí)行兩遍的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。